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/

您需要使用live而不是clickaslive还针对未来（阅读：DOM 脚本）元素。

编辑：如评论中所述：使用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 回答