JavaScript点击函数只能使用一次

Question

JavaScript点击函数只能使用一次

3

我有一个下拉菜单和一个提交函数，当点击下拉菜单中的任何子元素时就会执行该函数。现在，我想防止提交函数针对特定的li元素，因为应该在弹出的iFrame中插入跟踪ID。

使用以下代码，它可以在第一个下拉菜单上阻止提交函数，但在所有后续的下拉菜单上都不起作用。

也许有人能够为我提供一个简短的解决方案吗？

<script type="text/javascript">

$(document).ready(function() {

$('.track').click(function(){
        stopPropagation();
});

$('.dropdown li').click(function() {
        document.getElementById('opt').value = $(this).data('value');
        $('#options').submit();
});        

$("#options").submit(function() {
    if (confirm('are you sure?')){
        return true;
    } else {
        return false;
    }
});
});
</script>
<form name="" action="" method="post" id="options">
    <input type="hidden" name="update" id="opt" value="">
    <div id="item-select-option">
    <div class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options&nbsp;<span class="caret"></span></a>
        <ul id="selector" class="dropdown-menu pull-right" role="menu">
                <li data-value="paid"><a href="#">paid</a></li>
                <li data-value="shipped"><a href="#">shipped</a></li>
                <li class="track"><a href="tracking.php" class="trackbox" data-fancybox-type="iframe">track</a></li>
        </ul>
    </div>
    </div>
</form>

- tobias s

2

我想象你的JS在第一次点击后会崩溃，因为“event”未定义。 - Mike Scotty

将ID更改为类后，表单每次提交，我认为trackbox类没有被调用（现在是在新窗口中的iFrame）。 - tobias s

现在它可以工作了，我从$('.track').click(function(event)中删除了事件。谢谢！ - tobias s

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zakaria Acharki · Accepted Answer

问题：您在同一文档中有多个带有id“track/options”的元素，但是id属性应该是唯一的，因此当您将事件附加到id时，只有具有此id的第一个元素将被附加。

建议解决方案：

使用类来代替id，例如：

<form name="" action="" method="post" class="options">
    .....
    <li class="track">
        <a href="tracking.php" class="trackbox" data-fancybox-type="iframe">track</a>
    </li>
</form>

那么你的js应该像这样：

$('.track').click(function(event){
    event.stopPropagation();
});

$(".options").submit(function() {
    if (confirm('are you sure?')){
        return true;
    } else {
        return false;
    }
});

注意 : event 应该在匿名函数 function(event) 中存在。

希望这能帮到您。