javascript - Create a jQuery event after adding HTML element dynamically - Stack Overflow

admin管理员组

文章数量:1327715

I have a small script that creates new HTML form elements when a link in clicked via jQuery:

Javascript

var counterx = 2;
var counter = 2;

$(document).ready(function(){
    $("#addMoreRcpt").click(function(){
        if (counterx>10){
            alert("Only 10 reciepients are allowed");
            return false;
        }

        var newTextBoxTr = $(document.createElement('tr')).attr("id", 'RcptEml_' + counter);
        newTextBoxTr.append("<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" id="SearchItem_'+ counter + '">
        </td>");

        newTextBoxTr.appendTo("#RcptGroup");
        counter++;
        counterx++;
    });
});

HTML

<table border=1>
<div id="RcptGroup">
<tr>
    <th>1</th>
    <th>2</th>
</tr>
<div id="1">
<tr>
    <td><input type="text"></td>
    <td><input type="button" value="Search" id="SearchItem_1"></td>
</tr>
</div>
</div>
</table>
<br /><a id="addMoreRcpt" href="#" >Add row</a>

Now for each newly created HTML form, I need to create a new jQuery event so that "Search button" will properly function. Here is the jQuery for the search button:

$("#searchItem_1").on('click', function() {
    $("#bg").fadeIn(400, function() {
            $("#modal").fadeIn(400);
        });
    });
    $("#modal img").on('click', function() {
        var text = $(this).siblings('.descr').text();
        $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txtRcptID_1").val(text);    
            });
        });
    });

You see, the script above refers to search_Item_1 button and textbox with id txtRcptID_ID. What I need to acplish is to create that above script every time a the "Add Row" button is clicked.

But it also needs to have correct seatchItem_# and txtRcpt_# which corresponds to the counter number when a new element is created.

For example: when I click Add Row, and the counter currently at 3, then the script adds new element with id="txtRcptID_3" AND creates a new jQuery event starting like this $("#searchItem_3").on('click', function() {

I have tried and tried and tried but without success. Anyone can help?

EDIT **

I added the following code and got pretty close, but there is still a problem with adding the value from the modal window into the text field. I added an alert function to see the value of the counter, but it mysteriously increases by one when clicking the search button:

newTextBoxRow.appendTo("#RcptGroup");
newTextBoxRow1.appendTo("#RcptGroup");
alert("ID number:"+counter);

$("#searchItem_"+counter).on('click', function(ev){
    $("#bg").fadeIn(400, function() {
        $("#modal").fadeIn(400);
    });
    alert("ID number:"+counter);
});

$("#modal img").on('click', function(ev) {
    var text = $(this).siblings('.descr').text();
    $("#modal").fadeOut(400, function() {
        $("#bg").fadeOut(400, function() {
             $("#txtRcptID_"+counter).val(text);    
         });
    });
});

counter++;
counterx++; 

EDIT 2 **

Here is another try. I changed the id of the search text field to "txt_searchItem_'+ counter +'". And added this code. It functions, but still a problem though. When clicking on an image, it updates ALL text fields instead of just the one that triggered the modal window.

$(document).on('click', '.searchItemBtn', function(ev){
    var getID = $(this).attr("id");
    alert("ID number:"+getID);
        $("#bg").fadeIn(400, function() {
               $("#modal").fadeIn(400);
        });
         $(document).on('click', '#modal img', function(ev
            var text = $(this).siblings('.descr').text();
            $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txt_"+getID).val(text);    
                });
            });
        });
 }); 

I have a small script that creates new HTML form elements when a link in clicked via jQuery:

Javascript

var counterx = 2;
var counter = 2;

$(document).ready(function(){
    $("#addMoreRcpt").click(function(){
        if (counterx>10){
            alert("Only 10 reciepients are allowed");
            return false;
        }

        var newTextBoxTr = $(document.createElement('tr')).attr("id", 'RcptEml_' + counter);
        newTextBoxTr.append("<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" id="SearchItem_'+ counter + '">
        </td>");

        newTextBoxTr.appendTo("#RcptGroup");
        counter++;
        counterx++;
    });
});

HTML

<table border=1>
<div id="RcptGroup">
<tr>
    <th>1</th>
    <th>2</th>
</tr>
<div id="1">
<tr>
    <td><input type="text"></td>
    <td><input type="button" value="Search" id="SearchItem_1"></td>
</tr>
</div>
</div>
</table>
<br /><a id="addMoreRcpt" href="#" >Add row</a>

Now for each newly created HTML form, I need to create a new jQuery event so that "Search button" will properly function. Here is the jQuery for the search button:

$("#searchItem_1").on('click', function() {
    $("#bg").fadeIn(400, function() {
            $("#modal").fadeIn(400);
        });
    });
    $("#modal img").on('click', function() {
        var text = $(this).siblings('.descr').text();
        $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txtRcptID_1").val(text);    
            });
        });
    });

You see, the script above refers to search_Item_1 button and textbox with id txtRcptID_ID. What I need to acplish is to create that above script every time a the "Add Row" button is clicked.

But it also needs to have correct seatchItem_# and txtRcpt_# which corresponds to the counter number when a new element is created.

For example: when I click Add Row, and the counter currently at 3, then the script adds new element with id="txtRcptID_3" AND creates a new jQuery event starting like this $("#searchItem_3").on('click', function() {

I have tried and tried and tried but without success. Anyone can help?

EDIT **

I added the following code and got pretty close, but there is still a problem with adding the value from the modal window into the text field. I added an alert function to see the value of the counter, but it mysteriously increases by one when clicking the search button:

newTextBoxRow.appendTo("#RcptGroup");
newTextBoxRow1.appendTo("#RcptGroup");
alert("ID number:"+counter);

$("#searchItem_"+counter).on('click', function(ev){
    $("#bg").fadeIn(400, function() {
        $("#modal").fadeIn(400);
    });
    alert("ID number:"+counter);
});

$("#modal img").on('click', function(ev) {
    var text = $(this).siblings('.descr').text();
    $("#modal").fadeOut(400, function() {
        $("#bg").fadeOut(400, function() {
             $("#txtRcptID_"+counter).val(text);    
         });
    });
});

counter++;
counterx++; 

EDIT 2 **

Here is another try. I changed the id of the search text field to "txt_searchItem_'+ counter +'". And added this code. It functions, but still a problem though. When clicking on an image, it updates ALL text fields instead of just the one that triggered the modal window.

$(document).on('click', '.searchItemBtn', function(ev){
    var getID = $(this).attr("id");
    alert("ID number:"+getID);
        $("#bg").fadeIn(400, function() {
               $("#modal").fadeIn(400);
        });
         $(document).on('click', '#modal img', function(ev
            var text = $(this).siblings('.descr').text();
            $("#modal").fadeOut(400, function() {
                $("#bg").fadeOut(400, function() {
                    $("#txt_"+getID).val(text);    
                });
            });
        });
 }); 

• javascript
• jquery
• html
• forms
• dynamically-generated

Share Improve this question Follow edited Aug 13, 2012 at 13:45 Kaneda asked Aug 13, 2012 at 8:06 KanedaKaneda 5166 silver badges1414 bronze badges 1

• Try creating this in a jsfiddle and posting a link here – user1048676 Commented Aug 13, 2012 at 12:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

If you want to make on method to attach handlers to elements dynamically created, you should use it like this:

$(parent_selector).on('click', child_selector, function(ev){
    // do stuff on click
});

So, in your case, I would add a class to the buttons you are creating, besides the id:

newTextBoxTr.append('<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" class="button_class" id="SearchItem_'+ counter + '">');

and would attach the handler like this:

$(document).on('click', '.button_class', function(ev){
    // do stuff
});

本文标签： javascriptCreate a jQuery event after adding HTML element dynamicallyStack Overflow