Question

我正在动态地设置元素的ID，比如按钮。下面给出一个例子（代码可能有语法错误，我只是试图解释我的问题）。

function myFunc(){
    var counter = 0;
    return function(){
        counter += 1;
        var rowContent = '<div>';
        rowContent += '<button type="button" class="btn btn-default" id="button"' + counter + '></button>';
        rowContent += '</div>';
        $('#someElement').append(rowContent);
    };
}

现在我想将click事件与按钮相关联。在将事件与按钮关联时，我需要提及ID元素（例如$（＆＃39;＃myID＆＃39;））。但由于ID是动态设置的，我不确定ID是什么。有人能告诉我在将事件与之关联时如何引用元素的动态设置ID？在此先感谢!!

Answer 1

Delegate the event到父元素rowContent。

$('#someElement').append(rowContent);
$('button', rowContent).on('click', function(e) {
    // button element in the 'rowContent' context
}

将其委托给#someElement也会有效，除非您在其中放置带有不同点击处理程序的多个按钮。

Answer 2

在这种情况下，最好使用事件委托：

$('#someElement').on('click','[id^=button]',function(){
  //do stuff 
});

Answer 3

您可以轻松定义自己的自定义属性，并使用以下属性选择它：

rowContent += '<button type="button" mybtn="" class="btn btn-default" id="button"' + counter + '></button>';

这是选择器：

$("div[mybtn]")

通过Javascript

3 个答案: