Question

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

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())

Answer 1

您需要使用filter()按名称查找元素，因为find()内没有父选择器：

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

Answer 2

不，您无法将事件处理程序绑定到字符串。您需要先创建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 **/
});

演示： http://jsfiddle.net/KHeZY/200/

Answer 3

是的，但我不会按照你的方式去做：

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'));
});

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

这样jquery就可以跟踪DOM元素，在你的例子中你可以记录所有内容。 Jquery没有在您尝试绑定它们时构建DOM元素。

Fiddle

Answer 4

可以使用event-delegation正确完成此操作。但是，由于您的担心，我只是使用.add()和.filter()

编写了解决方案

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())

是否可以在循环中的元素串联期间绑定事件？

4 个答案:

Fiddle

DEMO