如何影响多个动态元素中的一个

Question

http://jsfiddle.net/SergeyKozlov/tewyg2js/3/

I use dynamic insertion HTML code using button events:

$("#NewItemImg").click(function(e) {
    e.preventDefault();
    itemCount++;

    var element = $("\
                    <div class=\"portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all\">\
                        <div class=\"portlet-header ui-widget-header ui-corner-all\">img " + itemCount + "\
                            <span class='ui-icon ui-icon-closethick portlet-close'></span>\
                        </div>\
                        <div class=\"portlet-content\">\
                            <div class=\"form-group\">\
                                <input type=\"text\" class=\"form-control\" name=\"article[body][][img]\" id=\"ImageURL\" placeholder=\"Image URL\">\
                            </div>\
                            <button id=\"SetImageURL\" type=\"button\" class=\"btn btn-default\">Submit</button>\
                            <img id=\"PanelNewImageURL\" src=\"http://imgde.me/508f93cfb59b5.jpg\" alt=\"2014-12-10T18:04:41.762Z\" title=\"2014-12-10T18:04:41.762Z\" onerror=\"imgError(this);\">\
                        </div>\
                    </div>\
    ");

Then I try to delete the new dynamic element using the following code:

$("body").on('click', '.column  .portlet-close', function () {
    $(this).closest( ".portlet" ).remove();
});

In this case it works. The problem is how to influence the one element of the plurality of dynamic elements.

$("body").on('click', '.column #SetImageURL', function () {
    //e.preventDefault();
    // itemCount++;
    $("#PanelNewImageURL").show();
    $("#ImageURL").hide();
});

When I use this code, when you acquired any button, and acts only on the first.

Answer 1

You are seeing this behavior because id attributes must be unique, but you are using multiple instances of "SetImageURL" as an id. When jQuery selectors include an id reference in them (as it does here: on('click', '.column #SetImageURL' . . . ), it acts only on the first matched element with that id, and ignores any other elements that have it, as well.

So, you will either need to figure out a way to make it work with a pure class selector, or a way to make the id values unique and include those unique id values in the selector. I'd go with the first approach . . . though, in either case, you should really make your id values unique. :)

EDIT:

Looking at your code again, try this:

$("body").on('click', '.column .btn-default', function () {
    //e.preventDefault();
    // itemCount++;
    $(this).siblings("img").show();
    $(this).parent().find(".form-control").hide();
});