jQuery檢測窗體變化

Question

希望能從你們那裏得到一點幫助。

在檢測表單是否發生變化時使用此腳本。如果是這樣，當我點擊某個類的href鏈接時，會彈出一個確認窗口。

var formChanged = false; 

$(document).ready(function() { 

$('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) { 
    $(this).data('initial_value', $(this).val()); 
}); 

$('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() { 
    if ($(this).val() != $(this).data('initial_value')) { 
     handleFormChanged(); 
} 
}); 

$('#my_form .editable').bind('change paste', function() { 
    handleFormChanged(); 
}); 

$('.navigation_link').bind("click", function() { 
    return confirmNavigation(); 
}); 
}); 

function handleFormChanged() { 
$('#save_or_update').removeAttr('disabled'); 
formChanged = true; 
} 

function confirmNavigation() { 
if (formChanged) { 
     return confirm('Are you sure? Your changes will be lost!'); 
} else { 
     return true; 
} 
} 

一切工作正常，除了當我有一個buttonclick插入一個div鏈接使用jQuery像這樣（做鏈接「可見」）：

$("button").click(function() { 
    var dylink = "<a href='#' class='navigation_link'>dynammic link</a>"; 
    $("#tester").html(dylink); 
}); 

確認畫面不如果我編輯表單然後點擊「動態鏈接」彈出。 其他鏈接完美。任何想法可能是什麼？

這是HTML代碼

<div><button>Show link</button></div> 
<div id="tester"></div> 
<div><a href="#" class="navigation_link">permanent link</a></div> 
<form action="" method="get" id="my_form"> 
<input type="text" class="editable"> 
<input type="button" name="button" id="save_or_update" value="Submit" disabled="disabled" /> 
</form> 

感謝 /A

Answer 1

其他答案暗示了它，但明確地說，這是做什麼。

更改此：

$('.navigation_link').bind("click", function() { 
    return confirmNavigation(); 
}); 
}); 

這樣：

$('.navigation_link').live("click", function() { 
    return confirmNavigation(); 
}); 
}); 

Answer 2

$("button").live("click",function() { 
    var dylink = "<a href='#' class='navigation_link'>dynammic link</a>"; 
    $("#tester").html(dylink); 
}); 

Answer 3

更改對象的innerHTML（這是當你使用.html(...)會發生什麼）可能會迫使瀏覽器重新創建某些對象。新創建的對象可能沒有綁定您的事件偵聽器。因此，您應該考慮使用而不是.bind(...)代替所有更改事件。有關更多信息，請參閱關於.live的jQuery文檔。