javascript - 为动态添加的元素绑定(bind)独立事件

Question

我有这个按钮点击代码负责添加动态数据

$("#AddSec").click(function() {

    $("<div />", {
            "class": "wrapper"
        })
        .append($('<span />', {
            "class": "AddCol",
            id: "AddCol" + i
        }).html('(+)col'))
        .append($('<span />', {
            "class": "RemCol",
            id: "RemCol" + i
        }).html('(-)col'))
        .appendTo("#data");
    $("<div />", {
            "class": "SecStyle",
            id: "Section" + i
        })
        .append($("<div/>").attr('class', 'well droppedFields ui-sortable Resizable'))
        .appendTo("#data");
    i++;
});

以下是这段代码的输出

<div id="data" style="height: 100px; line-height: 20px; width: 100%; display: table;">
    <div class="wrapper">
        <span class="AddCol" id="AddCol1">(+)col</span>
        <span class="RemCol" id="RemCol1">(-)col</span>
    </div>
    <div class="SecStyle" id="Section1">
        <div class="well droppedFields ui-sortable Resizable ui-resizable ui-droppable">
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">
            </div>
        </div>
    </div>
    <div class="wrapper"><span class="AddCol" id="AddCol2">(+)col</span>
        <span class="RemCol" id="RemCol2">(-)col</span>
    </div>
    <div class="SecStyle" id="Section2">
        <div class="well droppedFields ui-sortable Resizable ui-resizable ui-droppable">
            <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;">
            </div>
        </div>
    </div>
</div>

以下是上述输出的 html 布局

(+)列 (-)列是

<span class="AddCol" id="AddCol1">(+)col</span>
<span class="RemCol" id="RemCol1">(-)col</span>

分别每次都有不同的ID

现在我必须处理每个 (+)col 的点击事件，每次添加动态部分时都独立处理

任何人都可以帮助我接近这个

Answer 1

对于动态创建的按钮，您将使用事件委托(delegate):

$(document).on('click', '.AddCol', function() {
    //your code here
    // this.id gives you the id of the button clicked
});

 $(document).on('click', '.RemCol', function() {
    //your code here
    // this.id gives you the id of the button clicked
});

为了提高性能，如果#data不是动态创建的，使用:

$('#data').on('click', '.AddCol', .....); //and
$('#data').on('click', '.RemCol', .....);

$(document).on('click', '.AddCol,.RemCol', function() {
     //your code here
     alert( this.id ); // gives you the id of the button clicked
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="AddCol" id="AddCol1">(+)col</span>
<span class="RemCol" id="RemCol1">(-)col</span>
<span class="AddCol" id="AddCol2">(+)col</span> 
<span class="RemCol" id="RemCol2">(-)col</span>

引用:

-- jQuery.live()

$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+