Javascript click function only work once

Question

I have a dropdown menu with a submit function that executes, if any children from the dropdown is clicked. Now I want to prevent the submit function to a special li element, because there should be insert a tracking id in a popup iFrame.

With the following code it works so far on the first dropdown menu and prevent the submit function, but it wont work on all following dropdown's.

Maybe someone has a short solution for me?

<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>

I would imagine your JS crashes after the first click, because event is not defined. — Mike Scotty
– Mike Scotty, Commented Dec 22, 2016 at 15:09
after edit the id to class, the form submitted every time and the trackbox class isn't called i think(iFrame in new Window now). — tobias s
– tobias s, Commented Dec 22, 2016 at 15:34
Now it works, i deleted the event from the $('.track').click(function(event) Thanks!! — tobias s
– tobias s, Commented Dec 22, 2016 at 15:37

Zakaria Acharki · Accepted Answer · 2016-12-22 15:15:23Z

3

Problem: You've several elements with the id track/options when the id attribute should be unique in same document, so when you attach event to the id just the first element with this id that will be attached.

Suggested solution :

Use class instead of id's, like :

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

Then you js should be like :

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

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

NOTE : The event should be present in anonymous function function(event).

Hope this helps.

edited Dec 22, 2016 at 15:15

answered Dec 22, 2016 at 15:08

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Mike Scotty Over a year ago

Same problem as OP's code: event is not defined.

Zakaria Acharki Over a year ago

Missed that, thanks for you intervention... updated my answer

Aakash Thakur Over a year ago

I can only see one track in OP's code. Where did you see multiple.

jdmdevdotnet Over a year ago

Maybe you need to read the OP? I only see one track as well

tobias s Over a year ago

Thank you Zakaria, i edit it to class but now the form submit in every dropdown.

|

Collectives™ on Stack Overflow

Javascript click function only work once

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related