Question

是否有一种普遍接受的方法来更改JavaScript事件的操作？

以下内容看似干净，但不起作用，因为第一个事件在呈现页面时绑定到return View(MVC.Home.Views.Index, model);，并且在类更改时没有任何更改。这听起来像我理解正确吗？

#link

或者我应该有一个事件，并根据元素的类（或者$('#change-to-option-1').click(function(){$('#link').attr('class','option-1');}); $('#change-to-option-2').click(function(){$('#link').attr('class','option-2');}); $('.option-1').click(function(){alert('option 1');}); $('.option-2').click(function(){alert('option 2');}); <a href="#" id="change-to-option-1">Option 1</a> <a href="#" id="change-to-option-2">Option 2</a> <a href="#" id="link" class="option-1">Click Me</a>）将逻辑放入其中，而不是如图所示？

data()

或者是否有一种更普遍的方法？

Answer 1

如果要在更改用于最初绑定事件的类/任何标识后为元素创建事件触发器。然后你必须去event delegation。

$(document).on("click", ".option-1", function(){ alert('option 1'); });

如果您使用.option-1的任何最接近的静态父代替document

，您可以期望优化代码

Answer 2

我不推荐并且更喜欢硬编码。所以，这是一个解决方案，可以处理你想要做的事情。

$('#change-to-option-1,#change-to-option-2').click(function(){
   $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]);
});

 $('#link').on('click',$(this).attr("class"), function()
 {
      alert($(this).attr("class"));
 });

工作示例：https://jsfiddle.net/DinoMyte/39fvpstq/

如果您打算引入更多具有类似ID结构的锚链接：

$('[id^=change-to-option-]').click(function(){
   $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]);
});

 $('#link').on('click',$(this).attr("class"), function()
 {
      alert($(this).attr("class"));
 });

工作示例：https://jsfiddle.net/DinoMyte/39fvpstq/1/

如果您希望将所有内容放在一个事件块中：

$('#change-to-option-1,#change-to-option-2').click(function(){
   $('#link').unbind('click');
   $('#link').attr('class',this.id.split('-')[2] + '-' + this.id.split('-')[3]).on('click',$(this).attr("class"), function()
   { alert($(this).attr("class"));
   });
});

示例：https://jsfiddle.net/DinoMyte/39fvpstq/2/

根据其他事件更改事件操作

2 个答案: