使用同一按钮多次触发JQUERY功能

Question

I have 5 divisions in the html code and after the first division a button "show more" has been placed. I want to fire a jquery command which shows the second division on clicking the button "show more" once and the third division on again clicking the button and so on.

The problem is that i am only able to show the second division and not able to fire the jquery script the second time to show the third division.

below is my Jquery and html.

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; /* degrade the value of i */ $("button").on("click",function(){ //alert(i); $("#button").remove(); $("#"+i).show(); var button="<button id='button' class='btn btn-primary'>show more</button>"; $("#"+i).after(button); i=i+1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

Answer 1

You can do this way. The trick is:

$(":hidden").first().show()

Snippet

 $(function () { $("p:not(:first)").hide(); $("a").click(function (e) { e.preventDefault(); $("p:hidden").first().show(); }); }); 

 * {margin: 0; padding: 0; list-style: none; line-height: 1;} p {display: inline-block; padding: 5px; border: 1px solid #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <a href="#">Show</a> 

Also, you can add one more check to find if there are any more hidden <p> and then you can remove the link too:

 $(function () { $("p:not(:first)").hide(); $("a").click(function (e) { e.preventDefault(); $("p:hidden").first().show(); if (!$("p:hidden").length) $(this).hide(); }); }); 

 * {margin: 0; padding: 0; list-style: none; line-height: 1;} p {display: inline-block; padding: 5px; border: 1px solid #ccc;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <a href="#">Show</a> 

Answer 2

Well I guess a very short and clean solution is this: https://jsfiddle.net/hallleron/h6huonub/1/

Use the detach() function to handle the button. This way you DO NOT lose the event delegation of the button and it is way less resource intensive.

The key part is this line:

var el = $('#button').detach();

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; $("button").on("click",function(){ var el = $('#button').detach(); $("#"+i).show(); $("#"+i).after(el); i=i+1; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

EDIT: Added working code snippet.

Answer 3

It's because your second button is not in the DOM when you initialize your function.

Instead use this:

    $('body').on('click', 'button', function(){
       // Your code
    });

http://api.jquery.com/on/

 $(document).ready(function(){ for(i=2;i<=5;i++) { $("#"+i).hide(); } i=2; /* degrade the value of i */ $("body").on("click", "button" ,function(){ //alert(i); $("#button").remove(); $("#"+i).show(); var button="<button id='button' class='btn btn-primary'>show more</button>"; $("#"+i).after(button); i=i+1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div><!-- .row --> </div><!-- .container --> 

Answer 4

Why are you destroying your button, then trying to re-create it immediately after? Just use the same button. Otherwise you'll need delegation for dynamically added elements.

$("#button").click( () => $(`#${++i}`).show())

Or in ES5:

$("#button").click( function(){ $("#" + (++i) }).show())

You say that you're destroying the button and re-creating it so it's always after the last shown element, well, place the button directly after all hidden elements and leave it here...

Answer 5

When you remove the button and insert a new one, it does not have your click handler attached to it. What you can do instead is move the existing button, which will retain the click handler.

 $(document).ready(function() { var i, $button = $('#button'); for (i = 2; i <= 5; i++) { $("#" + i).hide(); } i = 2; /* degrade the value of i */ $("button").on("click", function() { var $i = $("#" + i); $button.insertAfter($i); $i.show(); i = i + 1; }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12" id="1" style="border:1px solid red; height:200px; width:300px;"></div> <button id='button' class='btn btn-primary'>show more</button> <div class="col-md-4 col-sm-6 col-xs-12" id="2" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="3" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="4" style="border:1px solid red; height:200px; width:300px;"></div> <div class="col-md-4 col-sm-6 col-xs-12" id="5" style="border:1px solid red; height:200px; width:300px;"></div> </div> <!-- .row --> </div> <!-- .container --> 

Indeed, the documentation of insertAfter mentions that

If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned:

(Emphasis mine.)

Answer 6

I think you are looking for

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-12" id="ID_1" style="border:1px solid red; height:200px; width:300px;"></div>
            <button id='button' class='btn btn-primary'>show more</button>


      </div><!-- .row -->
    </div><!-- .container -->

<!-- end snippet -->

<script>

    var id=1;
        $(document).ready(function(){

                $("body").on("click", "button" ,function(){
                id++;

                var div='<div class="col-md-4 col-sm-6 col-xs-12" id="ID_'+id+'" style="border:1px solid red; height:200px; width:300px;"></div>';
                    var button="<button id='button' class='btn btn-primary'>show more</button>";
                $("#button").remove();
                $(".row").append(div);
                    $(".row").append(button);
                });
            });

</script>

Answer 7

Try to do this:

$(document).ready(function() {
    for (var i = 2; i <= 5; i++) {
        $("#" + i).hide();
    }
    var i = 2; /* degrade the value of i */

    $("button").on("click", function() {
        $("#" + i).show();
        i = i + 1;
    });
});