Question

我有一个带有提交功能的下拉菜单，如果点击了下拉列表中的任何子项，则会执行该功能。现在我想阻止提交函数到一个特殊的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>

Answer 1

问题：当track/options属性在同一文档中应该是唯一的时，您有几个ID为id的元素，因此当您将事件附加到{时{1}}只是第一个带有此ID的元素。

建议的解决方案：

使用class而不是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>

注意： $('.track').click(function(event){ event.stopPropagation(); }); $(".options").submit(function() { if (confirm('are you sure?')){ return true; } else { return false; } });应出现在匿名函数event中。

希望这有帮助。

Javascript点击功能只能工作一次

1 个答案: