Question

我在使用.on()附加元素时出现问题。

我正在尝试选择并动态创建能够被选中并添加了div的div。我遇到的问题是，当我选择一个使用.on()的元素内的dyanmic元素时，它也会选择父元素。我对jQuery很新，所以可能有一个更好的解决方案。

<script type="text/javascript">
$(function () {
    var wrapper = $('#wrapper');
    var add_row_button = $('#add_row');        

    var row_count = 0;
    var selected_item = wrapper;

    add_row_button.click(function () {

        row_count++;

        var new_element = '<div id="' + row_count + '">' + row_count + '</div>';

        selected_item.append(new_element);

        $('#' + row_count).on("click", function () {
            console.log(selected_item);
            selected_item.removeClass("selected");
            selected_item = $(this);
            selected_item.addClass("selected");
            console.log(selected_item);
        });
    });        
});

<button id="add_row">Add row</button>
<div id="wrapper"></div>

Answer 1

works!

$(function() {

    //isolate code (optional)
    (function() {

        var wrapper = $('#wrapper');
        var addButton = $('#add_row');
        var row_count = 0;
        var selectedItem;

        //add a handler to the button
        addButton.on('click', function() {
            row_count++;
            var new_element = $('<div></div>').attr('id', row_count).text(row_count);
            wrapper.append(new_element);
        });

        //add the handler to the parent for the new items
        //so that we DON'T need to add a handler per new item basis
        wrapper.on('click','div', function() {
            if(typeof selectedItem !== 'undefined'){
                selectedItem.removeClass('selected');
            }
            selectedItem = $(this);
            selectedItem.addClass('selected');
        });
    }());
});

Answer 2

您尚未向我们展示您的实际HTML，但这里有一个可能适合您的示例。

委托事件处理的想法是将事件处理程序附加到静态的父对象（不来去）。子对象上的事件然后冒泡到父对象，父对象上的jQuery事件处理程序检查事件的来源，看它是否与所需的选择器匹配。

因此，如果这些动态创建的事件的容器是#container，并且每个动态创建子项的类名都为dynChild，那么您可以为符合该条件的所有子项连接一个单击处理程序：

<div id="container">
   <div class="dynChild"></div>
   <div class="dynChild"></div>
   <div class="dynChild"></div>
   <div class="dynChild"></div>
</div>

$('#container').on('click', '.dynChild', function() {
    // handle click on a child here
    // The this pointer will point to the element that was clicked on
});

然后，您可以在不更改事件处理的情况下添加/删除匹配的子对象，并且它们的单击事件将由父对象上的此委派事件处理程序自动处理。它是管理动态创建/修改页面的更强大功能之一。

jQuery追加元素也点击选择父级

2 个答案: