0

I fill in data for a user from a JSON array. This is a simulation of exactly the problem I have.

When I click on the button number 1 it goes over the each loop 4 times. Button 2, 3 times, etc.

Is there a way to stop the $.each loop. I thought that return false; should do this, but it doesn't seem to help. Check out the jsfiddle to see it in action.

html

<div id="add_more_asset_numbers_edit" /></div>

Jquery

var arr = [
       '1',  
       '2',   
       '3',   
       '4'

    ];

    $.each(arr, function (index, value) {
      // alert(value);
        $("#add_more_asset_numbers_edit").append("<input type='text' name='' value='"+ value+"' id='input_"+ value+"' disabled /><button type='button' id='"+ value+"_"+ value+"_1' class='btn btn-warning edit_more_assets'>Edit</button><button type='button' id='"+ value+"_"+ value+"' class='btn btn-danger remove_more_assets'>Remove</button><br id='"+ value+"_2'>");

        $(".edit_more_assets").on("click", function(){
            var id1 = $(this).prop("id");
            alert(id1);
            return false;

        });
        $(".remove_more_assets").on("click", function(){
                var id1 = $(this).prop("id");
                alert(id1)
                return false;
        });
    });

https://jsfiddle.net/soljohnston777/138tsgs7/

Sol
  • 949
  • 1
  • 11
  • 23
  • 2
    You're not returning false in the $.each callback. You're returning false in the onClick handler. You're also registering an onClick handler for each iteration. – noahnu Mar 23 '17 at 22:01
  • When you click on the buttons the each loop has finished long ago. It's too late to stop it at that point. You need to put the loops inside the click handlers, now it's the wrong way around. – JJJ Mar 23 '17 at 22:01
  • 2
    Possible duplicate of [How to break out of jQuery each Loop](http://stackoverflow.com/questions/1784780/how-to-break-out-of-jquery-each-loop) – VHS Mar 23 '17 at 22:02
  • I have tried putting the $(button).click() outside the $.each loop but nothing is responsive. – Sol Mar 23 '17 at 22:03
  • 1
    'When I click on the button number 1 it goes over the each loop 4 times. Button 2, 3 times, etc.' I think I see why you're confused. What's happening is that in the first loop iteration, you're creating the first button. Then you're adding a click handler to it. In the second iteration, you're creating the second button and adding a click handler to it. _You're also adding another click handler to the first button!_ This repeats for each iteration, causing the click handler to execute four times for the first button, but only once for the 4th. _But the loop is not executing when you click!_ – Michael L. Mar 23 '17 at 22:11

3 Answers3

3

I think you're getting confused with your nested functions. The only two uses of return here are inside your two click handlers. The problem is that the code in the click handlers doesn't actually get run until someone clicks on those elements. By that point, though, your loop has long since run all the way through. In order to break out of the loop, you'd need to have a return somewhere at the same level as where you add the click handlers.

Also, by registering your click handlers in a loop, you're actually registering them many times. Better to register the handlers outside of your loop so you only register them once.

Andrew Miner
  • 5,587
  • 2
  • 22
  • 26
  • I have placed them outside the loop but they weren't responsive. – Sol Mar 23 '17 at 22:05
  • 1
    I have to assume that's related to something else that's wrong with your code. From the small sample here, there's no reason why that shouldn't work. – Andrew Miner Mar 23 '17 at 22:06
  • It works on Jsfiddle placing in on the outside. Your absolutely right! I will have to see what little detail is causing the issue. :) – Sol Mar 23 '17 at 22:09
1

You're not actually calling return false anywhere inside of the each function. You're attaching functions to things that themselves call return false.

Also you have to use return false in this situation because it's not actually a loop, it's a function. You could break out of a real loop.

Brett Harris
  • 347
  • 1
  • 7
0
$(".edit_more_assets").on("click", function(){
        var id1 = $(this).prop("id");
        alert(id1);
        return false;

    });
    $(".remove_more_assets").on("click", function(){
            var id1 = $(this).prop("id");
            alert(id1)
            return false;
    });

move out these on click functions from $.each

Rajan Patil
  • 952
  • 7
  • 15