Javascript 是否可以在循环中的元素连接期间绑定事件？

以下是通过循环渲染多个按钮的示例。我想知道在将按钮附加到容器之前，是否可以在循环期间将事件绑定到每个按钮。我的例子不起作用

Jquery

function render(){

   var input = '',
       array = [{'name':'Confirm','title':'This'},{'name':'Cancel','title':'That'}] 

   $.each(array,function(k,obj){
       var name = obj.name;
       input += '<h3>'+obj.title+'</h3>';
       input += '<input type="submit" name="'+name+'" value="'+name+'"/>';

       $(input).find('[name="'+name+'"]').click(function(){

           alert(name)
           /*** do some ajax things etc ***/

       })

   })

   return input;
}

$('#box').append(render())

function render（）{
变量输入=“”，
数组=[{'name'：'Confirm'，'title'：'This'}，{'name'：'Cancel'，'title'：'That'}]
$.each（数组、函数（k、obj）{
var name=obj.name；
输入+=''+对象标题+''；
输入+=''；
$（输入）。查找（“[name=“”+name+“]”）。单击（函数（）{
警报（名称）
/***做一些事情等等***/
})
})
返回输入；
}
$（“#框”）.append（render（））

您需要使用

filter（）

按名称查找元素，因为在以下范围内没有父选择器可以

find（）

：

$(input).filter('[name="' + name + '"]').click(function(){
    alert(this.name)
    /*** do some ajax things etc ***/
})

---

不，不能将事件处理程序绑定到字符串。您需要首先创建HTML元素。我建议在附加HTML字符串后绑定单个委托事件处理程序，这样在性能方面也会更好：

function render() {

    var input = '',
        array = [{'name': 'Confirm','title': 'This'}, {'name': 'Cancel','title': 'That'}]

    $.each(array, function (k, obj) {
        var name = obj.name;
        input += '<h3>' + obj.title + '</h3>';
        input += '<input type="submit" name="' + name + '" value="' + name + '"/>';
    });

    return input;
}

$('#box').append(render()).on('click', 'input[name]', function() {
    alert(this.name);
    /** do some ajax things etc **/
});

function render（）{
变量输入=“”，
数组=[{'name'：'Confirm'，'title'：'This'}，{'name'：'Cancel'，'title'：'That'}]
$.each（数组、函数（k、obj）{
var name=obj.name；
输入+=''+对象标题+''；
输入+=''；
});
返回输入；
}
$（“#框”）.append（render（））.on（'click'，'input[name]'，function（）{
警报（此名称）；
/**做一些事情等等**/
});

---

演示：是的，但我不会像你那样做：

function render(target){

   var array = [{'name':'Confirm','title':'This'},{'name':'Cancel','title':'That'}] 

   $.each(array,function(k,obj){
       var name = obj.name;
       var h3 = $('<h3/>').text(obj.title);
       var input = $('<input/>')
                     .attr('type', 'submit')
                     .attr('name',name)
                     .val(name);

       input.click(function() {alert('test');});

       target.append(h3);
       target.append(input);
   })

}

$(document).ready(function(){
    render($('#box'));
});

函数渲染（目标）{
var数组=[{'name'：'Confirm'，'title'：'This'}，{'name'：'Cancel'，'title'：'That'}]
$.each（数组、函数（k、obj）{
var name=obj.name；
变量h3=$（''）.text（对象标题）；
变量输入=$（''）
.attr（'type'，'submit'）
.attr（'name'，name）
.val（姓名）；
点击（函数（）{alert（'test'）；}）；
目标追加（h3）；
目标。追加（输入）；
})
}
$（文档）.ready（函数（）{
渲染（$（“#框”）；
});

因此，创建要渲染的jquery对象，然后将事件附加到这些对象。然后，一旦构建了对象，请jquery渲染它们

通过这种方式，jquery可以跟踪DOM元素，在您的示例中，您可以对所有内容进行字符串化。Jquery没有在您试图绑定DOM元素的位置构建DOM元素

---

这可以通过使用

事件委派

正确地完成，但是考虑到您的关注，我刚刚使用

.add（）

和

过滤器（）编写了一个解决方案

function render（）{
变量输入=“”，
数组=[{
'名称'：'确认'，
“title”：“This”
}, {
'名称'：'取消'，
“标题”：“那”
}],
元素=$（）；
$.each（数组、函数（k、obj）{
var name=obj.name；
输入+=''+对象标题+''；
输入+=''；
元素=元素添加（$（输入））；
输入=”；
});
元素过滤器（“[名称]”）。单击（函数（）{
警报（此名称）；
})
返回元素；
}
$（“#框”）.append（render（））

function render() {

    var input = '',
        array = [{
            'name': 'Confirm',
            'title': 'This'
        }, {
            'name': 'Cancel',
            'title': 'That'
        }],
        elem = $();

    $.each(array, function (k, obj) {
        var name = obj.name;
        input += '<h3>' + obj.title + '</h3>';
        input += '<input type="submit" name="' + name + '" value="' + name + '"/>';
        elem = elem.add($(input));
        input = "";
    });

    elem.filter("[name]").click(function () {
        alert(this.name);
    })

    return elem;
}

$('#box').append(render())