Question

这是我的第一篇文章，所以要温柔。：）

我的页面上有一个链接。

我想在点击链接时创建一个新的div。

新div应包含用于创建此div的相同链接，这样我就可以继续创建包含相同链接的新div。

这是我的代码：

<script type="text/javascript">

    $(document).ready(searchCriteria);
    $(document).ready(loadSearchCriteria);

    function searchCriteria() {
        $(".test").load("searchCriteria.html");
    }

    function loadSearchCriteria() {
        $(".test1234").click(function () {
            $(".test1234").load("searchCriteria.html");
            function loadNewClick() {
                var $newClick = $('<div class="test1234"></div>');
                    $(".content").append($newClick);
            }
        });
    };

</script>

我正在使用jquery-1.4.2.min.js

我是jquery的新手，所以任何提示都会被认可。谢谢：）

Answer 1

当$(".test").load("searchCriteria.html");完成

时，您需要致电loadNewClick

$(".test").load("searchCriteria.html", function(){
    alert('completed');
    //EDIT:: this is your load new click function
    var $newClick = $('<div class="test1234"></div>');
    $(".content").append($newClick);
});

Answer 2

试试这个：

$(function() {
    //document ready
    $(".test").load("searchCriteria.html");
    var $newClick = $('<div class="test1234">Sample div</div>');
    $(".content").append($newClick);
    $($newClick).live("click", function() {
        $(this).load("searchCriteria.html");
    });
});

Answer 3

因此，您希望每个新添加的.test1234元素都具有相同的点击事件吗？您可以使用.on()将委托点击事件发送给班级。这有效地将它绑定到任何获取该类，无论是新类还是旧类（.on()替换最近版本的jQuery中的.live()）。

但委托事件有（适度的）开销，对于像这样简单的事情可能会过多。创建新元素时，可以将创建它的函数绑定到它。将事件绑定到像这样的新创建的元素是一个方便的"lesser known" jQuery trick。

这是重要位：将创建新div的函数绑定到新创建的div，就像这样（单击新行以获取可读性）：

 function somefunction() {
   var $newClick = $('<div class="test1234"></div>')
     .click( somefunction );
   $(".content").append($newClick);
 }

（您也可以使用.click(function() { some code })，或将其写为$('<div/>').addClass('test1234').click( somefunction );，或者其他任何内容，它非常灵活）

我这次测试了:)这里有一个jsfiddle来演示完整代码（使用.text()代替.load()。

我认为您在评论中提到的问题与您的代码结构的方式存在不同的问题 - 查看jsfiddle代码中的更改和注释，并思考何时发生的情况。

改变一切，打破它并重新加载直到它有意义:)。

从一个javascript编码设计师到另一个javascript编码设计师的友情提示 - 学习实际编程最困难的事情就是了解计时和移动部件（每个部分的每个部分都是如此）。请记住，在jQuery中，.click() 绑定事件（click()只是bind('click')的快捷方式）。当我学习使用.bind('click)而不是.click()（以及bind('mouseover')等等）时，我发现它很有帮助，这样当我回读代码时，总是直观地看到究竟是什么发生在何时何地。

另外，请经常使用console.log()。记录所有内容并观察出什么是什么。并且，想想你的文本编辑器/ jsfiddle / firebug等作为一个无限大的写生簿，告诉你当某些东西不起作用时：这是一个很棒的东西，尝试一切，并犯了很多错误！这是最好的学习方式。

Jquery：添加一个带有函数的新div

3 个答案: