如何使用 jquery 更改 onclick 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4506219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change onclick event with jquery?
提问by VATSHAL
I have create a js file in which i am creating the dynamic table and dynamically changing the click event for the calendar but onclicking the calender image for dynamic generated table, calendar popup in the previous calendar image. Please help me
我创建了一个 js 文件，在其中创建动态表并动态更改日历的单击事件，但单击动态生成表的日历图像，上一个日历图像中的日历弹出窗口。请帮我
code
代码
/***------------------------------------------------------------
*
*Developer: Vipin Sharma
*
*Creation Date: 20/12/2010 (dd/mm/yyyy)
*
*ModifiedDate ModifiedBy Comments (As and when)
*
*-------------------------------------------------------------*/
var jq = jQuery.noConflict();
var ia = 1;
jq(document).ready(function(){
jq("#subtaskid1").click(function() {
if(ia<=10){
var create_table = jq("#orgtable").clone();
create_table.find("input").each(function() {
jq(this).attr({
'id': function(_, id) { return ia + id },
'name': function(_, name) { return ia + name },
'value': ''
});
}).end();
create_table.find("select").each(function(){
jq(this).attr({
'name': function(_,name){ return ia + name }
});
}).end();
create_table.find("textarea").each(function(){
jq(this).attr({
'name': function(_,name){ return ia + name }
});
}).end();
create_table.find("#f_trigger_c").each(function(){
var oclk = " displayCalendar(document.prjectFrm['"+ ia +"dtSubDate'],'yyyy-mm-dd', this)"; //ERROR IS HERE
var newclick = new Function(oclk);
jq(this).click(newclick);
}).end();
create_table.appendTo("#subtbl");
jq('#maxval').val(ia);
ia++;
}else{
var ai = ia-1;
alert('Only ' + ai + ' SubTask can be insert');
}
});
});
回答by Amirali
You can easily change the onclickevent of an element with jQuery without running the new function with:
您可以onclick使用 jQuery轻松更改元素的事件，而无需使用以下命令运行新函数：
$("#id").attr("onclick","new_function_name()");
By writing this line you actually change the onclickattribute of #id.
通过写这条线，你真正改变onclick的属性#id。
You can also use:
您还可以使用：
document.getElementById("id").attribute("onclick","new_function_name()");
document.getElementById("id").attribute("onclick","new_function_name()");
回答by aizotov
Remove the old event handler
删除旧的事件处理程序
jQuery('#id').unbind('click');
And attach the new one
并附上新的
jQuery('#id').click(function(){
// your code here
});
回答by Memo36
Updating this post (2015) : unbind/bind should not be used anymore with jQuery 1.7+. Use instead the function off(). Example :
更新这篇文章（2015 年）：在 jQuery 1.7+ 中不应再使用 unbind/bind。改用函数 off()。例子 ：
$('#id').off('click');
$('#id').click(function(){
myNewFunction();
//Other code etc.
});
Be sure that you call a non-parameter function in .click, otherwise it will be ignored.
一定要在.click中调用一个非参数函数，否则会被忽略。
回答by Mich. Gio.
$('#id').attr('onclick', 'function()');
$('#id').attr('onclick', 'function()');
Right now (11 Jul 2015) this solution is still working (jquery 2.1.4); in my opinion, it is the best one to pick up.
现在（2015 年 7 月 11 日）这个解决方案仍然有效（jquery 2.1.4）；在我看来，这是最好的选择。
回答by pmrotule
If you want to change one specific onclick event with jQuery, you better use the functions .on()and .off()with a namespace (see documentation).
如果你想改变一个特定onclick事件使用jQuery，你最好使用功能。对（）和.off（）与命名空间（见文档）。
Use .on()to create your event and .off()to remove it. You can also create a global object like g_specific_events_set = {};to avoid duplicates:
使用.on()以创建活动，.off()将其删除。您还可以创建一个全局对象，g_specific_events_set = {};以避免重复：
$('#alert').click(function()
{
alert('First alert!');
});
g_specific_events_set = {};
add_specific_event = function(namespace)
{
if (!g_specific_events_set[namespace])
{
$('#alert').on('click.' + namespace, function()
{
alert('SECOND ALERT!!!!!!');
});
g_specific_events_set[namespace] = true;
}
};
remove_specific_event = function(namespace)
{
$('#alert').off('click.' + namespace);
g_specific_events_set[namespace] = false;
};
$('#add').click(function(){ add_specific_event('eventnumber2'); });
$('#remove').click(function(){ remove_specific_event('eventnumber2'); });div {
display:inline-block;
vertical-align:top;
margin:0 5px 1px 5px;
padding:5px 20px;
background:#ddd;
border:1px solid #aaa;
cursor:pointer;
}
div:active {
margin-top:1px;
margin-bottom:0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="alert">
Alert
</div>
<div id="add">
Add event
</div>
<div id="remove">
Remove event
</div>回答by JSG
(2019) I used $('#'+id).removeAttr().off('click').on('click', function(){...});
(2019) 我用过 $('#'+id).removeAttr().off('click').on('click', function(){...});
I tried $('#'+id).off().on(...), but it wouldn't work to reset the onClick attribute every time it was called to be reset.
我试过了$('#'+id).off().on(...)，但是每次调用它重置时都无法重置 onClick 属性。
I use .on('click',function(){...});to stay away from having to quote block all my javascript functions.
我.on('click',function(){...});过去常常避免引用阻止我所有的 javascript 函数。
The O.P. could now use:
OP现在可以使用：
$(this).removeAttr('onclick').off('click').on('click', function(){
displayCalendar(document.prjectFrm[ia + 'dtSubDate'],'yyyy-mm-dd', this);
});
$(this).removeAttr('onclick').off('click').on('click', function(){
displayCalendar(document.prjectFrm[ia + 'dtSubDate'],'yyyy-mm-dd', this);
});
Where this came through for me is when my div was set with the onClick attribute set statically:
这对我来说是当我的 div 被设置为静态设置 onClick 属性时：
<div onclick = '...'>
<div onclick = '...'>
Otherwise, if I only had a dynamically attached a listener to it, I would have used the $('#'+id).off().on('click', function(){...});.
否则，如果我只有一个动态附加的侦听器，我会使用$('#'+id).off().on('click', function(){...});.
Without the off('click') my onClick listeners were being appended not replaced.
没有 off('click') 我的 onClick 侦听器将被附加而不是被替换。
回答by wbrzezin
@Amirali
@Amirali
console.log(document.getElementById("SAVE_FOOTER"));
document.getElementById("SAVE_FOOTER").attribute("onclick","console.log('c')");
throws:
抛出：
Uncaught TypeError: document.getElementById(...).attribute is not a function
in chrome.
在铬。
Element exists and is dumped in console;
元素存在并在控制台中转储；
