jQuery將onclick函數附加到元素

Question

我有四個帶有onclick事件的圖像按鈕，它們分別是兩兩對。 我正在嘗試將這些圖像按鈕替換為文本按鈕，並將onclick函數重新連接到下一個文本按鈕。 這些按鈕並不總是在頁面上，我只限於使用jQuery 1.4，否則.prop會使此操作變得容易.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不是對象（評估'b.split'）

當input.one不存在時。

我該如何進行這項工作？

Answer 1

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

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

Answer 2

好吧，我建議您采用第一個選擇的方法：

檢查這個演示

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);
});

注意事項：

• $('input.one').attr('onclick')或$('input.two').attr('onclick')保存onclick屬性的值（它是一個字符串）。 但是，由於瀏覽器以不同的方式處理事件屬性，因此它們通過function onclick() { clickOne() }返回，您對此function onclick() { clickOne() }了解。 因此，如果要直接調用該函數，則必須剝離function() {}或立即調用它，或者使用get(0).attributes.onclick.nodeValue來get(0).attributes.onclick.nodeValue它。
• 將clickOne和clickTwo包裝在head並將其余內容包裝在document.ready