使用jQuery將輸入附加到DOM時調用函數

我有一個頁面使用jquery添加和刪除DOM的輸入。其中一些共享一個類（「數字」）。一旦每個輸入都被追加，我的代碼應該使用「數字」類爲每個新輸入調用.numeric（）。我在代碼的開頭定義了這個塊，使用jQuery將輸入附加到DOM時調用函數

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

但是在加載DOM之後，加載似乎與附加節點沒有關係。就緒事件也不起作用。

我該怎麼做？謝謝隊友

編輯：我設法解決這個以下@BGerrissen方法以更一般的方式。我已經定義了一個用於追加的包裝器（我稱之爲draw），然後每次追加任何東西時，我都會觸發$(document).trigger('appended')，因此很容易跟蹤任何地方。然後我用

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

做我需要的。歡呼聲

來源

2011-08-16 Korcholis

當追加輸入時，也會觸發自定義事件。

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（）調用，無論您想與否和有可能會碰壞，因爲我還沒有調查此覆蓋的穩定性。

來源

2011-08-16 08:41:02 BGerrissen

謝謝您的回答。但是當你將這個輸入追加到更多的代碼中時該怎麼辦？ – Korcholis

搜索和替換真的，或創建一個幫助器的方法，但你仍然需要搜索和替換。沒有一個簡單的方法。你可以重寫jQuery的.append（）方法來總是激發一個「附加」事件，但我會認真反對這個。 – BGerrissen

。在jQuery 1.7版本中，.live（）方法已被棄用，並且.bind（）也在出路 - 以防萬一任何人可能直接複製此示例。 – netpoetica

我同意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 
}

來源

2011-08-16 09:41:14

使用jQuery將輸入附加到DOM時調用函數

回答

相關問題