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布局 enter image description here

（+）col（ - ）col 是

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

分别每次都有不同的ID

现在我必须为每个（+）col处理click事件，每次添加动态部分时都会独立处理

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

Answer 1

对于动态创建的按钮，您将使用事件委派：

$(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+

Answer 2

您将在jQuery中使用事件冒泡和事件委托：http://api.jquery.com/on/

这样的事情：

$('#data').on('click', '.AddCol', function(event) {
  var $addCol = $(event.currentTarget);
  var $wrapper = $addCol.closest('.wrapper');
});

您无法使用$(this)的原因是因为您在静态/预定义的#data元素上实际上是绑定。但它会捕获冒泡事件并触发与.AddCol选择器匹配的任何内容。触发事件的元素位于event.currentTarget

Answer 3

您可以为每个添加的元素添加动态点击侦听器，如下所示：

var $wrapper = $("<div />", { "class": "wrapper" });
var $spanplus = $('<span />', { "class": "AddCol", id: "AddCol" + i}).html('(+)col');
//Binds click event
$spanplus.on('click',function(){ //Your onclick code});

//Append the span to the wrapper
$wrapper.append($spanplus);

将独立事件绑定到动态添加元素

3 个答案: