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

Question

Fiddle Example

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

查询

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

是的，但我不会像你那样做:

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 尚未在您尝试绑定(bind)到它们的位置构建 DOM 元素。

Fiddle