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

Question

我有一个使用 jquery 从 DOM 追加和删除输入的页面。 其中一些共享一个 class（“数字”）。 附加每个输入后，我的代码应使用“数字”class 对每个新输入调用.numeric()。 我在代码的开头定义了这个块，

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

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

我怎么能那样做？ 谢谢队友

编辑：我设法以更一般的方式解决了这个@BGerrissen方法。 我已经定义了一个用于附加的包装器（我称之为 draw），然后每次我 append 任何东西时，我都会触发$(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()

或者使用辅助方法在 append 上触发事件。

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   
}