Question

我通过jQuery创建一些标签，并为它定义一个类名称，如下所示：

 $('#tr').html('<select class="optcode">
                 <option>select code</option>
                 <option>select code</option>'
              </select>);

在其他地方，我希望按类别名称按类别<select>访问$('.optcode').change(function(){ alert('something'); })，但它确实无法解决这个问题：

CREATE TABLE article (
    article_id INTEGER NOT NULL,
    revision INTEGER NOT NULL,
    PRIMARY KEY (article_id, revision)
    );

CREATE TABLE bill (
    bill_id INTEGER PRIMARY KEY
    );

Answer 1

更改函数未绑定到元素，因为它们在执行代码时不存在于DOM中。您可以使用函数同时将元素添加到DOM和绑定中。

这样的事情会起作用：

function doStuff() {

    $('#tr').html('<select class="optcode"><option>select code</option><option>select code</option></select>');

    $('.optcode').change(function(){
        alert('something');
    })

}

$(document).ready(function() {
    doStuff();

})

你可以看到它在这个JS小提琴中工作：https://jsfiddle.net/hsvnhhn7/

希望有所帮助。

Answer 2

尝试使用delegate： -

$('#tr').on('change', '.optcode', function(){
    alert('something');
});

Answer 3

只需更改

$('#tr').html('<select class="optcode">
                 <option>select code</option>
                 <option>select code</option>'
              </select>);

要

$('#tr').html('<select class="optcode"><option>select code</option><option>select code</option></select>');

参见演示

$('#tr').html('<select class="optcode"><option>select code</option><option>select code</option></select>');

 $('.optcode').change(function(){
    alert('something');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tr"></div>

在jQuery中按类名访问标记

3 个答案: