locked
Event not firing for dynamically add controls RRS feed

  • Question

  • User1509050366 posted

    Hi,

    Using this I have managed to add new div line and remove it. (https://forums.asp.net/p/2158102/6271987.aspx?p=True&t=636999926187081390)

    But when I'm trying to do some validations/ calculations on newly added div tag none of the events file up... what am I missing?

    //This event doesn't get fired up for newly added row
    
     $("#idVolume" + totalNewlyAddLines + "").blur(function () {            
                CalculateMeasurementing();
            })
    
    
     function CalculateMeasurementing()
            {
    //do some measurement
    
    }

    Monday, July 29, 2019 5:28 PM

Answers

  • User665608656 posted

    Hi singhswat,

    According to your example, I put your code into the environment I tested before and found the following issues:

    First, in your large list of dynamically added HTML statements, when you assign ID to inputs dynamically, you forget to add lower quotation marks.

    Second, if you want to trigger the blur event of the dynamically added input box, you need to write the blur event in the $(function(){}) event and because it is a dynamically added tag, you need to use 'on' to trigger the blur event.

    Third, you can't guarantee that the value of your current totalPlletLines variable is exactly the ID value of the input box you selected.

    After you click add button, the value of totalPalletLines is always fixed and unchanged until you click add button again.

    So I recommend that you use the wildcard * in the ID selector to implement your functions, you can refer to this link: Wildcards in jQuery selectors

    For more details , you could refer to the following code:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                // debugger;
            var totalPalletLines = 1;
                $("#addFLine").click(function () {
                    var selectedWeightType = $("#FreightWeightLine option:selected").text();
               totalPalletLines = totalPalletLines + 1;
                           $("#palletLine1").after("<div class='row' id='palletLine2'><br/> 
    <div class='col-md-1'><input type='text' id='idlength" + totalPalletLines + "' class='form-control' placeholder='Length' onkeypress='return OnlyNumeric(event)' autofocus='' required=''> </div>
    <div class='col-md-1'> <input type='text' id='idWidth" + totalPalletLines + "' class='form-control' placeholder='Width' onkeypress='return OnlyNumeric(event)' autofocus=''> </div>
    <div class='col-md-1'> <input type='text' id='idHeight" + totalPalletLines + "' class='form-control' placeholder='Height' onkeypress='return OnlyNumeric(event)' required='' autofocus=''> </div>
    <div class='col-md-1'> <input type='text' id='idTotal" + totalPalletLines + "' class='form-control' placeholder='Total' > </div>
    <div class='col-md-1'> <input type='button' id='btnremoveFreightLine' value='Remove' class='btn btn-danger btn-sm float-xl-right' mytype='remove' /> </div> </div>") }); $(document).on('blur', "[id*=idHeight]", function () { var idPalletLines = $(this).attr("id").substring(8,$(this).attr("id").length);//get the number at the end of id var length = parseInt( $("#idlength" + idPalletLines).val()); var width = parseInt( $("#idWidth" + idPalletLines).val()); var height = parseInt($(this).val()); $("#idTotal" + idPalletLines).val( length+width+height); }); $(document).on('click', "[mytype='remove']", function () { //alert($(this).parent().closest('div').attr('id')); $(this).parents().eq(1).remove(); }); }) function OnlyNumeric(e) { if ((e.which < 48 || e.which > 57)) { if (e.which == 8 || e.which == 46 || e.which == 0) { return true; } else { return false; } } } </script> </head> <body> @using (Html.BeginForm("CreateFRate", "C0725_2158102", FormMethod.Post)) { <h3>header</h3> <div class="row"> <div class="col-md-1">
    @Html.DropDownList("LocationCity", null, htmlAttributes: new { @class = "form-control" })
    </div>
    <div class="col-md-1">
    @Html.DropDownList("LocationState", null, htmlAttributes: new { @class = "form-control" })
    </div>
    <div class="col-md-1">
    @Html.DropDownList("LocationCountry", null, htmlAttributes: new { @class = "form-control" })
    </div> </div> <div class="spacer5" style="margin-top:25px"></div> <h3>Pallet line(s)</h3> <div class="row" id="palletLine1"> <div class="col-md-1"> <input type="text" id="idlength" class="form-control" placeholder="Length" onkeypress="return OnlyNumeric(event)" autofocus="" required=""> </div> <div class="col-md-1"> <input type="text" id="idWidth" class="form-control" placeholder="Width" onkeypress="return OnlyNumeric(event)" autofocus=""> </div> <div class="col-md-1"> <input type="text" id="idHeight" class="form-control" placeholder="Height" onkeypress="return OnlyNumeric(event)" required="" autofocus=""> </div> <div class="col-md-1"> <input type="button" id="addFLine" value="Add more F line(s)" class="btn btn-primary btn-sm float-xl-right" /> </div> </div> <div class="spacer5" style="margin-top:25px" id="spaceAfter1Line"></div> <div class="row"> <div class="col-md-2 col-md-offset-5"> <input type="reset" value="Cancel" class="btn btn-danger btn-sm float-xl-right" /> <input type="submit" value="Generate FRate" class="btn btn-success btn-sm float-xl-right" /> </div> </div> } </body> </html>

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2019 2:02 AM

All replies

  • User475983607 posted

    The following is an ID selector and will bind to the first ID match as IDs are unique.

     $("#idVolume" + totalNewlyAddLines + "").blur(function () {            
                CalculateMeasurementing();
            })

    The ID must exist at the time the code is loaded plus how you populated totalNewlyAddLines matters.

    Monday, July 29, 2019 5:47 PM
  • User1509050366 posted

    Thanks @Mgebhard

    Your points are noted

    "totalNewlyAddLines " - This makes sure all the Id's in each row is unique

    and for the sake of testing I have hard coded the function to second row ... but still the alert doesn't fire

    https://ibb.co/h11Hyrp

    Monday, July 29, 2019 6:28 PM
  • User475983607 posted

    singhswat

    "totalNewlyAddLines " - This makes sure all the Id's in each row is unique
    and for the sake of testing I have hard coded the function to second row ... but still the alert doesn't fire

    Forum members need enough code to reproduce the issue to point out the bugs.  Usually, this symptom is caused by assigning an event handler before the element exists.  There is no way to know what the code is doing without the source.

    Try wrapping the event handler assignment in the ready event.

    $(function () {
        $("#idActualWeight2").blur(function () {
            console.log(totalPalletLines);
            CalculateMeasurementing();
        });

    Lastly, I recommend learning how to use the browser's dev tools (F12) to debug JavaScript and stop using alert().

    https://developers.google.com/web/tools/chrome-devtools/

    Monday, July 29, 2019 6:39 PM
  • User1509050366 posted

    Thanks mgebhard

    You are correct even the ready event is not getting fired for the dynamically added div tag... not sure what should I do to fire it.

    should I adding some element tag while adding the div tag ? (I will try though)

    I have create a example here... https://jsfiddle.net/singhswat/n2hvwroj/20/

    Monday, July 29, 2019 10:39 PM
  • User475983607 posted

    totalPalletLines is defined within the ready function which means you have a scope bug that causes an undefined error when the page loads. 

    Uncaught ReferenceError: totalPalletLines is not defined

    Even if you fixed the bug the  following code runs one time when the page loads. 

    $("#idHeight" + totalPalletLines).blur(function () {
        alert(totalPalletLines);
        $("#idTotal" + totalPalletLines).val(40); //For demo purposes hard coding the value
    });

    You really should set aside time to learn how to use the browser's dev tools (F12) to debug your JavaScript code.

    Tuesday, July 30, 2019 12:57 AM
  • User665608656 posted

    Hi singhswat,

    According to your example, I put your code into the environment I tested before and found the following issues:

    First, in your large list of dynamically added HTML statements, when you assign ID to inputs dynamically, you forget to add lower quotation marks.

    Second, if you want to trigger the blur event of the dynamically added input box, you need to write the blur event in the $(function(){}) event and because it is a dynamically added tag, you need to use 'on' to trigger the blur event.

    Third, you can't guarantee that the value of your current totalPlletLines variable is exactly the ID value of the input box you selected.

    After you click add button, the value of totalPalletLines is always fixed and unchanged until you click add button again.

    So I recommend that you use the wildcard * in the ID selector to implement your functions, you can refer to this link: Wildcards in jQuery selectors

    For more details , you could refer to the following code:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-3.3.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                // debugger;
            var totalPalletLines = 1;
                $("#addFLine").click(function () {
                    var selectedWeightType = $("#FreightWeightLine option:selected").text();
               totalPalletLines = totalPalletLines + 1;
                           $("#palletLine1").after("<div class='row' id='palletLine2'><br/> 
    <div class='col-md-1'><input type='text' id='idlength" + totalPalletLines + "' class='form-control' placeholder='Length' onkeypress='return OnlyNumeric(event)' autofocus='' required=''> </div>
    <div class='col-md-1'> <input type='text' id='idWidth" + totalPalletLines + "' class='form-control' placeholder='Width' onkeypress='return OnlyNumeric(event)' autofocus=''> </div>
    <div class='col-md-1'> <input type='text' id='idHeight" + totalPalletLines + "' class='form-control' placeholder='Height' onkeypress='return OnlyNumeric(event)' required='' autofocus=''> </div>
    <div class='col-md-1'> <input type='text' id='idTotal" + totalPalletLines + "' class='form-control' placeholder='Total' > </div>
    <div class='col-md-1'> <input type='button' id='btnremoveFreightLine' value='Remove' class='btn btn-danger btn-sm float-xl-right' mytype='remove' /> </div> </div>") }); $(document).on('blur', "[id*=idHeight]", function () { var idPalletLines = $(this).attr("id").substring(8,$(this).attr("id").length);//get the number at the end of id var length = parseInt( $("#idlength" + idPalletLines).val()); var width = parseInt( $("#idWidth" + idPalletLines).val()); var height = parseInt($(this).val()); $("#idTotal" + idPalletLines).val( length+width+height); }); $(document).on('click', "[mytype='remove']", function () { //alert($(this).parent().closest('div').attr('id')); $(this).parents().eq(1).remove(); }); }) function OnlyNumeric(e) { if ((e.which < 48 || e.which > 57)) { if (e.which == 8 || e.which == 46 || e.which == 0) { return true; } else { return false; } } } </script> </head> <body> @using (Html.BeginForm("CreateFRate", "C0725_2158102", FormMethod.Post)) { <h3>header</h3> <div class="row"> <div class="col-md-1">
    @Html.DropDownList("LocationCity", null, htmlAttributes: new { @class = "form-control" })
    </div>
    <div class="col-md-1">
    @Html.DropDownList("LocationState", null, htmlAttributes: new { @class = "form-control" })
    </div>
    <div class="col-md-1">
    @Html.DropDownList("LocationCountry", null, htmlAttributes: new { @class = "form-control" })
    </div> </div> <div class="spacer5" style="margin-top:25px"></div> <h3>Pallet line(s)</h3> <div class="row" id="palletLine1"> <div class="col-md-1"> <input type="text" id="idlength" class="form-control" placeholder="Length" onkeypress="return OnlyNumeric(event)" autofocus="" required=""> </div> <div class="col-md-1"> <input type="text" id="idWidth" class="form-control" placeholder="Width" onkeypress="return OnlyNumeric(event)" autofocus=""> </div> <div class="col-md-1"> <input type="text" id="idHeight" class="form-control" placeholder="Height" onkeypress="return OnlyNumeric(event)" required="" autofocus=""> </div> <div class="col-md-1"> <input type="button" id="addFLine" value="Add more F line(s)" class="btn btn-primary btn-sm float-xl-right" /> </div> </div> <div class="spacer5" style="margin-top:25px" id="spaceAfter1Line"></div> <div class="row"> <div class="col-md-2 col-md-offset-5"> <input type="reset" value="Cancel" class="btn btn-danger btn-sm float-xl-right" /> <input type="submit" value="Generate FRate" class="btn btn-success btn-sm float-xl-right" /> </div> </div> } </body> </html>

    The result of this work demo:

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, July 30, 2019 2:02 AM