jQuery附加onclick函數元素

Question

我有四個圖像按鈕與onclick事件附加到他們兩對兩個。我試圖用文本按鈕替換這些圖像按鈕，並將onclick功能重新附加到下一個文本按鈕。這些按鈕並不總是在頁面上，我只能使用jQuery 1.4，否則.prop會使這更容易。

考慮這個HTML：

<input type="image" src="path/to/image.gif" class="one" onclick="function()" /> 
<input type="image" src="path/to/image.gif" class="one" onclick="function()" /> 
<input type="image" src="path/to/image2.gif" class="two" onclick="function()" /> 
<input type="image" src="path/to/image2.gif" class="two" onclick="function()" /> 

我寫了下面的jQuery代碼來獲得的onclick功能，輸入和重新綁定的onclick功能。

$('input.one').each(function(){ 
    var oneOnClick = $(this).attr('onclick'); 
    $(this).replaceWith('<input type="button" value="one" class="one" onclick="'+oneOnClick+'" />'); 
)}; 

和.two一樣。我發現在jQuery中返回onclick屬性的值的方式意味着無法完成。

使用一些資源網上我更新了我的代碼看起來像這樣：

var oneOnClick = $('input.one').first().attr('onclick'); 
var twoOnClick = $('input.two').first().attr('onclick'); 

$('input.one').each(function(){ 
    $(this).replaceWith('<input type="button" class="one" value="one"/>'); 
}); 
$('input.two').each(function(){ 
    $(this).replaceWith('<input type="button" class="two" value="two"/>'); 
}); 

$('input.one').live("click", oneOnClick); 
$('input.two').live("click", twoOnClick); 

但我發現了一個錯誤

TypeError: undefined is not an object (evaluating 'b.split')

時input.one不存在。

我該如何做這項工作？

Answer 1

請嘗試以下代碼綁定onClick事件

$(document).ready(function(){ 
    $('input.one').each(function(){ 
     $(this).attr('type',"button"); 
    }); 
}); 

Answer 2

好吧，我建議你與你的第一選擇方法去：

入住這DEMO

function clickOne() 
{ 
    alert('hi'); 
} 
function clickTwo() 
{ 
    alert('helleo'); 
} 

$(document).ready(function(){ 
    var oneOnClick = $('input.one').first().get(0).attributes.onclick.nodeValue; 
    var twoOnClick = $('input.two').first().get(0).attributes.onclick.nodeValue; 
    $('input.one').each(function(){ 
     $(this).replaceWith('<input type="button" value="one" class="one" onclick="'+oneOnClick+'" />'); 
    }); 

    $('input.two').each(function(){ 
     $(this).replaceWith('<input type="button" value="two" class="two" onclick="'+twoOnClick+'" />'); 
    }); 
    $('input.one').live("click", oneOnClick); 
    $('input.two').live("click", twoOnClick); 
}); 

POINT TO NOTE:

• $('input.one').attr('onclick') or $('input.two').attr('onclick') holds the value of the onclick attribute (which is a string). However, because the browsers treat the event attributes in a different way, they are returned with function onclick() { clickOne() } and you know about this. Thus, if you want to directly call the function, you'll have to either strip the function() {} or call it immediately or get it using get(0).attributes.onclick.nodeValue
• wrap clickOne and clickTwo in head and remaining things on document.ready