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 (evalating '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);
});

注意事项：

• $('input.one').attr('onclick') 或 $('input.two').attr('onclick') 保存 onclick 属性的值（这是一个字符串）。但是，由于浏览器以不同的方式处理事件属性，因此它们是 返回 function onclick() { clickOne() } 你知道 对这个。因此，如果您想直接调用该函数，您将 必须要么剥离 function() {} 或立即致电或使用 get(0).attributes.onclick.nodeValue
• 将 clickOne 和 clickTwo 包裹在 head 中，剩下的东西放在 document.ready