CODEWITHSUNDEEP
javascriptjqueryhtml
user2079197
user2079197

Reputation: 169

Cannot use show/hide

My issue: When I add another text input, I cannot show/hide it.

<html>
 <head>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

        $('.show_hide').click(function(){
        $(".slidingDiv").slideToggle();
        });

        $(".slidingDiv1").hide();
        $(".show_hide1").show();

        $('.show_hide1').click(function(){
        $(".slidingDiv1").slideToggle();
        });

});

var counter = 1;
var limit = 3;
function addInput(divName){

mainCanvasDiv = document.createElement("div");
mainCanvasDiv.className = "slidingDiv1";
mainCanvasDiv.style.display = "none";

var newdiv = document.createElement('div');
newdiv.id = "dynamicInput" + counter;
          newdiv.innerHTML = "<a href='#' class='show_hide1'>Show/hide</a>";
          mainCanvasDiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text'  name='dynamicInput" + counter +"1'><br><input type='text' name='dynamicInput" + counter +"2'>";
          document.getElementById(divName).appendChild(newdiv).appendChild(mainCanvasDiv);
          counter++;

}
$(document).ready(function(){
    $('#sortable').sortable({
        update: function(event, ui) {
 var newOrder = $(this).sortable('toArray').toString();
            document.getElementById('sort').value = newOrder;
        }
    });
});


</script>
</head>
<body>

<form action="lost.php" method="POST">
<div id="sortable">
<div id="dynamicInput">
<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
<input type="text" name="myInputs[]">

</div>
</div>
</div>
<input type="button" value="Add another text input" onClick="addInput('sortable');"><br />
<input type="hidden" name="sort" id="sort" value="">
<input type=submit value="GO!">
</form>
</body>
</html>

Any advice?

Update:
I have changed $('.show_hide1').click(function(){ to $('.show_hide1').on("click", "div a.show_hide1", function(){

Maybe I am doing something wrong, I am not strong in JS.

Upvotes: 0

Views: 477

Answers (2)

David Aleu
David Aleu

Reputation: 3942

Replace your click events for:

            $("#sortable").on("click","div a.show_hide", function() {
                $(".slidingDiv").slideToggle();
            });

            $("#sortable").on("click","div a.show_hide1", function() {
                $(".slidingDiv1").slideToggle();
            });

Upvotes: 0

Sven
Sven

Reputation: 13275

Fixed: http://jsfiddle.net/Yhp3c/

You need to use live instead of click as live also targets future (read: DOM scripted) elements.

Edit: As stated in comments: Use on instead of live.

Upvotes: 2

Related Questions