jQuery不允許動態事件偵聽器

-3

var action = 'click'; 
if (action == 'click') { 
     $('#element').on(action, function() { 
      // do something... 
     }) 
} else if (action == 'mouseenter') { 
     $('#element').on(action, function() { 
      // do something completely different... 
     }) 
}

只要action發生變化，事件就會根據舊的動作關閉;它不會動態改變。我也試過：jQuery不允許動態事件偵聽器

$('#element').on(action, function() { 
     if (action == 'click') { 
      // do something... 
     } else if (action == 'mouseenter') { 
      // do something else... 
     } 
});

爲smart snowflakes：我需要一個元素根據要differenly處理什麼action，不是同時進行的。客戶端可以更改action本身。

編輯＃2：我沒有試圖根據元素上使用的事件得到不同的結果。如果客戶端選擇了「播放模式」，則操作將設置爲mouseenter，在這種情況下，#element不應該是可點擊的，並且只能在徘徊時操作！

來源

2016-02-09 PyRoss

我的回答是，只是不是這樣......你其實並沒有動態地添加事件監聽器，你只需添加邏輯運算符絕對沒有理由。 – ryan0319

ryan0319，那麼正確的做法是什麼？ – PyRoss

@PyRoss你需要編輯這個問題，使其更清楚你想要的結果是什麼。 –

你可以有多個事件這樣。然後如果else語句取決於e.type的值。

$('#element').on('click mouseover mouseout',function(e){ 
    console.log(e.type) 
    if(e.type == 'click') 
      //handle click 
    else if(e.type == 'mouseover') 
      //handle mouseover 
    ... 
})

編輯：的jsfiddle。 https://jsfiddle.net/pe8awhyL/2/

HTML

<button id="click"> 
click 
</button> 
<button id="mouseover"> 
mouseover 
</button> 
<button id="mouseout"> 
mouseout 
</button>

JS：只要監聽器邏輯的工作方式 '動作' 被設定爲可識別的事件。

var action = 'click'; 

$('div').on('click mouseover mouseout',function(e){ 
    if(e.type == action) 
     //The event is equal to the expected action, handle accordingly 
}) 

$('button').on('click',function(){ 
    action = $(this).attr('id'); 
})

來源

2016-02-09 19:44:43

這不是我想要做的。根據元素上使用的事件，我不會嘗試獲得不同的結果。如果客戶端選擇了「播放模式」，那麼'action'設置爲'mouseenter'，這種情況下'＃元素'不應該點擊*（點擊時不應該有任何效果），並且只能在徘徊時運行，反之亦然。 – PyRoss

其實我認爲這是你想要做的，你只需要識別用例並擴展它。當事件發生並且您正在檢查e.type時，只需在相同的if語句中添加一個「AND」條件來檢查「動作」是否是相同的事件。增加了一個jsfiddle。 –

是的，你是對的。我一開始並不認識，但現在我明白了。感謝您的幫助，與那些不用那些甚至無法理解它們的問題（比如elclanrs）相比，不像那些計算器的失敗者。 <3 – PyRoss

你可以看看bind()和unbind()作爲一種動態改變你的功能的方法。爲了更好地跟蹤，我肯定會考慮向它們添加命名空間。 https://api.jquery.com/unbind/

我有內聯下面的jQuery的例子：

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>unbind demo</title> 
 
    <style> 
 
    button { 
 
    margin: 5px; 
 
    } 
 
    button#theone { 
 
    color: red; 
 
    background: yellow; 
 
    } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 
    
 
<button id="theone">Does nothing...</button> 
 
<button id="bind">Bind Click</button> 
 
<button id="unbind">Unbind Click</button> 
 
<div style="display:none;">Click!</div> 
 
    
 
<script> 
 
function aClick() { 
 
    $("div").show().fadeOut("slow"); 
 
} 
 
$("#bind").click(function() { 
 
    $("#theone") 
 
    .bind("click", aClick) 
 
    .text("Can Click!"); 
 
}); 
 
$("#unbind").click(function() { 
 
    $("#theone") 
 
    .unbind("click", aClick) 
 
    .text("Does nothing..."); 
 
}); 
 
</script> 
 
    
 
</body> 
 
</html>

來源

2016-02-09 19:37:14 hdost

我需要一個元素來區別對待，這取決於「行動」是什麼，而不是同時進行。而「行動」本身可以由客戶改變。 – PyRoss

您可以嘗試類似：

<div id="element"> 
    Click 
    </div> 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
    <button id="click"> 
    Activate Click Event 
    </button> 
    <button id="mouseenter"> 
    Activate mouseEnter Event 
    </button> 


<script> 


    $("button").click(function() 
{ 
    var action = this.id; // you may use any other criteria to match this up 
    $('#element').off(); // removes all delegated events 
    if (action == 'click') 
    { 
     $('#element').on(action, function() { 
      alert('click invoked'); 
     }); 
    } else if (action == 'mouseenter') {  
     $('#element').on(action, function() { 
     alert('mouseenter invoked'); 
     }); 
    } 
}); 
</script>

例子：https://jsfiddle.net/DinoMyte/98nnvjqm/2/

來源

2016-02-09 19:49:30 DinoMyte

你所面對的是一個預期的行爲。因爲，您只是在每張支票上重新註冊事件。所以首先，它將註冊click事件。一旦動作改變爲mouseenter，它將註冊mouseenter事件（我認爲你將在動作改變後觸發該代碼）

你必須做的是在註冊新元素之前刪除現有事件。您可以在文檔中閱讀有關Off的更多信息。你甚至可以在上面的鏈接工作的一些例子

即

function actionChanged() { 
    if(action == "mouseenter") { 
     $("body").off("click", "#element", clickFunction); 
     $("body").on("mouseenter", "#element", mouseEnterFunction); 
    } else if (action == 'click') { 
     $("body").off("mouseenter", "#element", mouseEnterFunction); 
     $("body").on("click", "#element", clickFunction); 
    } 
}

來源

2016-02-09 19:52:52 Nauphal

jQuery不允許動態事件偵聽器

回答

相關問題