如何使用jQuery更改onclick事件?


76

我创建了一个js文件,在其中创建动态表并动态更改日历的click事件,但是在onclicking动态生成的表的日历图像时,会在前一个日历图像中弹出日历。请帮我

/***------------------------------------------------------------
* 
*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');
        }
    });
});

1
尝试使用jQUery UI Datepicker。对我来说真的很好。jqueryui.com/demos/datepicker
Timothy Ruhle,2010年

Answers:


193

您可以onclick使用jQuery轻松更改元素的事件,而无需使用以下命令运行新功能:

$("#id").attr("onclick","new_function_name()");

通过编写此行,您实际上可以更改的onclick属性#id

您还可以使用:

document.getElementById("id").attribute("onclick","new_function_name()");


16
仅作为参考,如果您有一些要传递给您的参数new_function_name,则可以编写: $("#id").attr("onclick","new_function_name('"+param1+"', '"+param2+"')"); 这是我找到此答案时一直在寻找的内容,它对我有所帮助。+1'
AlexB

31

删除旧的事件处理程序

$('#id').unbind('click');

并附上新的

$('#id').click(function(){
    // your code here
});

17

更新此文章(2015年):jQuery 1.7+不应该再使用unbind / bind。改用off()函数。范例:

$('#id').off('click');
$('#id').click(function(){
    myNewFunction();
    //Other code etc.
});

请确保在.click中调用非参数函数,否则它将被忽略。


5
使用jQuery,您可以使用以下方法减少代码量:$('#id').off('click').on("click", function() { ... });
NuclearPeon

1
@NuclearPeon,您正在用分号和换行符大声笑,以使其更难阅读
魁北克'18

3
@quemeful不一定。您可以将click事件onoffclick事件放在自己的缩进行上,以使其更具可读性(注释使它难以显示),但是我的版本所做的不只是更改语句的外观。每当调用时$(...),它都会为该元素进行查找。编写$("#id")两次将在DOM中查找元素两次,这意味着我的版本的效率是两倍。使用id查找,这是最小的改进,但是使用类/元素/属性/数据查找,它的总和就增加了。为了使其像我一样高效地工作,请放入$("#id")avar并加以解决。
NuclearPeon

6

$('#id').attr('onclick', 'function()');

目前(2015年7月11日),该解决方案仍然有效(jQuery 2.1.4);我认为,这是最好的选择。


2

如果你想改变一个特定onclick事件使用jQuery,你最好使用功能。对().off()与命名空间(见文档)。

使用.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>


2

(2019)我用 $('#'+id).removeAttr().off('click').on('click', function(){...});

我尝试了$('#'+id).off().on(...),但是每次调用onClick属性都要重置都将无法重置。

.on('click',function(){...});过去常常避免引用阻止我所有的JavaScript函数。

OP现在可以使用:

$(this).removeAttr('onclick').off('click').on('click', function(){ displayCalendar(document.prjectFrm[ia + 'dtSubDate'],'yyyy-mm-dd', this); });

对我来说,这是通过静态设置onClick属性设置div时实现的:

<div onclick = '...'>

否则,如果我只有一个动态附加的侦听器,则应该使用$('#'+id).off().on('click', function(){...});

没有off('click'),我的onClick侦听器将被附加而不替换。


0

@阿米拉利

console.log(document.getElementById("SAVE_FOOTER"));
document.getElementById("SAVE_FOOTER").attribute("onclick","console.log('c')");

抛出:

Uncaught TypeError: document.getElementById(...).attribute is not a function

镀铬

元素存在并将其转储到控制台中;

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.