0

I have a function that binds click events to all anchor tags whose ids are contained in an array called guids.

I iterate through all guids and am trying to make displayDetails() function bind to the click event. I have tried .click(function()) and .bind('click', function()) but neither one is working correctly. Function displayDetails() keeps getting executed within the bind.

The problem is that when I run the page the displayDetails() gets called for each guid. I don't want to call displayDetails() each time. I only want to bind it, and not execute the displayDetails() in the loop.

How do I make displayDetails() get bound to the click event and not get called in the loop when binding is occurring?

 function bindLinks() {
        for (var idx = 0; idx < guids.length; idx++)
        {
            $("#" + guids[idx]).click(function (e) {
                displayDetails(guids[idx], orders[idx]);
            });
        }
    }

EDIT: I broke up my function into two separate functions and now I am getting the correct popup displayed from displayDetails() but now the function is called many times based on the fixed index. I am getting multiple alerts where instead I want the function called only once.

  function bindLink(idx) {
        $("#" + guids[idx]).click(function () {
            displayDetails(guids[idx], orders[idx]);
        });
    }

    function bindLinks() {
        for (var idx = 0; idx < guids.length; idx++)
        {
            bindLink(idx);
        }
    }
Vahe
  • 1,699
  • 3
  • 25
  • 76
  • This has the answer to attaching the events in a loop http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example – epascarello Oct 23 '14 at 16:31
  • `displayDetails` shouldn't be called when you add th event listeners. But since you increase `idx`, when the event listenr runs, it will be `guids.length`. – Oriol Oct 23 '14 at 16:31
  • Um, it should not be called in the loop....If it is, you have an issue elsewhere. – epascarello Oct 23 '14 at 16:31
  • 3
    Your code you've provided here [doesn't exhibit the problem you describe](http://jsfiddle.net/wcc1944b/). However, it *does* have the problem that all your listener functions reference the same `idx` from the outer scope, which is incremented past the length of the `guids` array. – apsillers Oct 23 '14 at 16:32
  • @apsillers, Thank you for the response. If I use the length of guids as the loop termination, how would I go past the boundary? – Vahe Oct 23 '14 at 16:36
  • @user1691103 The for loop doesn't terminate until it becomes true that `idx == guids.length` (and of course `guids.length` is always one more than the last index; `guids[guids.length]` is not defined, so `guids[idx]` is not defined whenever one of the event listener function runs after the loop terminates). See the link the first comment for a solution. The problem is not that you go past the boundary *during* the loop; it's that `idx` has *gone past* the boundary (in order to terminate the loop) *after* the loop is finished, so at click-time, `idx` is no longer a valid index. – apsillers Oct 23 '14 at 16:38
  • It seems that the modification I made in my edits is displaying the correct value in the alert. But now the alert within displayDetails() is being called multiple times showing multiple alerts. I must have some other problem in the code. – Vahe Oct 23 '14 at 17:16
  • Grab ready solution i've created: http://jsfiddle.net/qjyd0mk7/ . Hope it helps. – nd_macias Oct 23 '14 at 17:33

0 Answers0