使用 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   
}