Question

我有一个页面使用jquery追加并删除DOM的输入。他们中的一些人共享一个班级（“数字”）。一旦附加了每个输入，我的代码应该使用“numeric”类为每个新输入调用.numeric（）。我在代码的开头定义了这个块，

$('input.numeric')
    .live('load', function() {
        $(this).numeric();
    });

但加载DOM后，加载似乎与附加节点无关。就绪事件也不起作用。

我怎么能这样做？谢谢伙伴

编辑：我设法以更一般的方式解决了@BGerrissen方法之后的问题。我已经定义了一个附加的包装器（我称之为draw），然后每次添加任何内容时，都会触发$(document).trigger('appended')，因此可以轻松跟踪任何地方。然后我用

$(document)
     .bind('appended', function() {
        $('input.numeric').numeric();
    });

做我需要的。干杯

Answer 1

附加输入时，也会触发自定义事件。

var child = $("<input class='numeric' />");
$("#parent").append(child);
child.trigger("appended");

然后你可以为你的目的挂钩事件：

$('input.numeric')
    .live('appended', function() { // Use .on() method from jQuery 1.7 and up
        $(this).numeric();
    });

注意：从jQuery 1.7开始，不推荐使用.live（）。使用.on（）

或者使用辅助方法在追加时触发事件。

function appendAndFireAppendEvent( parentExpr , childExpr ){
    var child = $( childExpr );
    $( parentExpr  ).append(child);
    child.trigger("appended");
}

// usage
appendAndFireAppendEvent( "#parentElement" , "<input class='numeric' />" );

不建议**

您还可以覆盖jQuery的append（）方法以始终触发“追加”事件。

var oldAppend = $.fn.append;
$.fn.append = function( el )
{
   oldAppend.call( this , el ); // DONT convert el to a JQuery object before passing it to oldAppend
   $(el).trigger("appended");
   return $(el); // to allow chaining to work
}

但是这将适用于所有append（）调用，不管你是否想要它，并且可能会破坏某些内容，因为我没有调查此覆盖的稳定性。

Answer 2

我同意BGerrissen使用自定义事件。

关于你的问题：如果您要添加更多html而不仅仅是输入，则可以扫描整个html片段，如下所示：

var html = '';
html += '<div>';
html += '<input class="numeric" />';
html += '</div>';

var $html_to_add = $(html);

// add html to dom

if ($html_to_add.find('input.numeric').length > 0) {
  // trigger event   
}

使用jQuery将输入附加到DOM时调用函数

2 个答案: