jQuery multiple buttons click events with the same class only working on the first button

问题

I have multiple buttons having "item-submit" as class name. I wanted to dynamically append contents as shown in the code below when the button is clicked. The thing is, the click event is only being called on the first button. Clicking another button will not add any content, and worse, will reload the entire page. As you can see in the code, the variable table is being appended to order-table, which were created dynamically. This is also where the item-submit button resides where I wanted to append the contents.

jQuery(".item-submit").each(function(){
        jQuery(this).click(function(){
            alert("aw");
            var id = jQuery(this).attr("id");
            var size = jQuery("#items"+id).val();
            alert("ID: "+ id);
            var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
            for(i=0; i<size; i++) {
                table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
            }
            table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
            jQuery("#order-table"+id).append(table);
            jQuery("#items"+id).attr("readonly","readonly");
            jQuery("#"+id).attr("disabled","disabled");
            return false;
        });
    });

I have also tried jQuery("").click() and still nothing.

I would greatly appreciate it, if someone could help me. And if something is not clear, please feel free to leave a comment. Thank you.

回答1:

    jQuery(".item-submit").click(function(){
        alert("aw");
        var id = jQuery(this).attr("id");
        var size = jQuery("#items"+id).val();
        alert("ID: "+ id);
        var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
        for(i=0; i<size; i++) {
            table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
        }
        table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
        jQuery("#order-table"+id).append(table);
        jQuery("#items"+id).attr("readonly","readonly");
        jQuery("#"+id).attr("disabled","disabled");
        return false;
    });

you don't need the each-loop in this case, just give the whole class the click-event and "this" will be the one you clicked

回答2:

You don't need to iterate thorough a jQuery selector, which is also what's causing the bug. Your code should probably be more like this:

    jQuery(".item-submit").click(function(){
        alert("aw");
        var id = jQuery(this).attr("id");
        var size = jQuery("#items"+id).val();
        alert("ID: "+ id);
        var table = "<table><tbody><tr><td colspan='2'><label style='color: #800000;font-weight:bold'>Detailed Description & Price of Item<br /></label></td></tr>";
        for(i=0; i<size; i++) {
            table = table + "<tr><td><input placeholder='Enter item names...' name='items"+i+"' class='items' type='text' /></td><td><input placeholder='Enter cost of items...' name='cost"+i+"' class='cost' type='text' /></td></tr>";
        }
        table = table + "<tr><td><label style='color: #800000; font-weight: bold;'>Total Cost</label></td><td><input placeholder='Total Cost' name='totalcost' class='totalcost' type='text' /></td></tr></tbody></table>";
        jQuery("#order-table"+id).append(table);
        jQuery("#items"+id).attr("readonly","readonly");
        jQuery("#"+id).attr("disabled","disabled");
        return false;
    });

回答3:

$(".item-submit").click(function() {

});

is the correct syntax to use - you don't need to iterate yourself..

Are you seeing any errors in the javascript console?

回答4:

You can use jQuery('.item-submit').click...

My guess is there is an error and that's why the page reloads because all your script after the error gets ignored, including the return false statement, and because the page reloads you can't see the error inside Firebug (console).

In order to see what's happening use preventDefault on the first line.

jQuery(".item-submit").click(function(event){
    event.preventDefault();
    // ... your code here
});

This way page won't reload even if there is an error in your code and you can catch it and fix it. Good luck.

回答5:

I've got it all figured out. The problem is that the buttons are created dynamically. I don't really know what happened, but I think it is because the script is not loaded for the new contents appended. What I did was add the click functions in every content appended. Seems to work just fine.

来源：https://stackoverflow.com/questions/12369122/jquery-multiple-buttons-click-events-with-the-same-class-only-working-on-the-fir