0

私の問題: 別のテキスト入力を追加すると、それを表示/非表示にできません。

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

何かアドバイス？

更新:
$('.show_hide1').click(function(){ を $('.show_hide1').on("click", "div a.show_hide1", function(){ に変更しました

多分私は何か間違ったことをしているのかもしれません.私はJSに強くありません.

4

2 に答える 2

2

修正済み: http://jsfiddle.net/Yhp3c/

asliveの代わりに、将来の (読み取り: DOM スクリプト化された) 要素もターゲットにする必要があります。clicklive

編集：コメントに記載されているように：onの代わりに使用してくださいlive。

于 2013-02-16T20:46:28.963 に答える
0

クリック イベントを次のように置き換えます。

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

            $("#sortable").on("click","div a.show_hide1", function() {
                $(".slidingDiv1").slideToggle();
            });
于 2013-02-16T21:00:08.860 に答える