Question

＆＃13;

$('a.locked').click(function(e) {
 	e.preventDefault();
});
    
$(document).ready(function(){
    $("button.button2").click(function(){
        $("a").removeClass("locked");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com"target="_blank" id="action2">
  <button class="button2">
    <span class="icon">CLICK HERE</span>
  </button>
  <br>
  <br>
</a>
<a href="example.com"class="locked">
  <button class="locked-button">
    <i class="fa fa-lock" aria-hidden="true"></i>
    <span class="icon">CONTINUE</span>
  </button>
</a>

＆＃13;

我希望最后一个元素被锁定，如果你点击第二个按钮，那么锁定的类将从最后一个元素中移除，我将能够点击该链接。

它会删除课程，但我仍然无法点击该链接。如何解决？

此外，还有更聪明的方法吗......

Answer 1

<a>删除class="locked"时，不会从$('a.locked').click(function(e) { e.preventDefault(); });删除此事件绑定：

$('a').click(function (e) {
    if ($(this).hasClass('locked')) {
        e.preventDefault();
    }
});

至少对于像这样的直接绑定，jQuery最初只使用选择器将事件处理程序附加到所有匹配的元素。稍后触发事件时，它不会重新检查选择器。目前，您必须自己检查：

<div id="parent">
  <a href="example.com" target="_blank" id="action2">
    <!-- ... -->
  </a>
  <a href="example.com" class="locked">
    <!-- ... -->
  </a>
</div>

但是，如果你有一个整体的父元素，你可以使用委托绑定，然后jQuery会在触发事件时为你重新检查（第二个）选择器。

$('#parent').on('click', 'a.locked', function (e) {
    e.preventDefault();
});

multiple=yes

Answer 2

因此，只删除一个css类在你的情况下不起作用。你应该remove the event handler允许点击按钮，这样的事情应该有效：

$("a.locked").on("click.locked", function(e) {
    e.preventDefault();
});

$(document).ready(function(){
    $("button.button2").click(function(){
        $("a.locked").off("click.locked");
        $("a").removeClass("locked");
    });
});

Working jsfiddle

Answer 3

喜欢这个？查看此SO问题，以了解有关我使用的toggle函数的更多信息。

$(document).on("click", "#ToggleLock", function(e) {
   $('#Continue').prop('disabled', function(i, v) {
     return !v;
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id='ToggleLock'>Unlock/Lock</button>
<button onclick="location.href='http://www.example.com'" type="button" id='Continue' disabled>Continue</button>

如果我误解了这个问题，请告诉我。

Answer 4

删除课程是不够的，因为您向所有$('a.locked')添加了点击事件，因此您需要在删除课程后使用.off()删除点击事件。同时尝试定位特定元素，您可以将id="btn_continue"添加到第二个按钮。（$("a")将定位所有<a>，这不是您想要做的事情）

注意：

＆＃13;

$('a.locked').click(function(e) {
 	e.preventDefault();
});
    
$(document).ready(function(){
    $("button.button2").click(function(){
        $("#btn_continue").off().removeClass("locked");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="example.com" target="_blank" id="action2">
  <button class="button2">
    <span class="icon">CLICK HERE</span>
  </button>
  <br>
  <br>
</a>
<a href="example.com" id="btn_continue" class="locked">
  <button class="locked-button">
    <i class="fa fa-lock" aria-hidden="true"></i>
    <span class="icon">CONTINUE</span>
  </button>
</a>

＆＃13;

jquery脚本对我不起作用

4 个答案: