2

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

我的页面上有一个链接。

单击链接时，我想创建一个新的 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 的新手，所以任何提示都会被欣赏。谢谢 ：）

4

3 回答 3

0

那么您希望这些新添加的 .test1234 元素中的每一个都具有相同的点击事件吗？您可以使用.on()将单击事件委托给该类。这有效地将它绑定到任何获得该类的东西，无论是新的还是旧的（在最新版本的 jQuery 中.on()替换）。.live()

但是委托事件有（适度的）开销，对于像这样简单的事情来说这可能是过度的。创建新元素时，可以将创建它的函数绑定到它。像这样将事件绑定到新创建的元素是一个方便的“鲜为人知”的 jQuery 技巧。

这是重要的一点：将创建新 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 编码设计师到另一个的友好提示 - 学习真正的编程最难的事情是让你的头脑了解时间和移动部分（每件事在每一点是什么）。请记住，在 jQuery 中，诸如.click() 绑定事件之类的东西（click()只是 的快捷方式bind('click')）。当我学习使用.bind('click)而不是.click()（bind('mouseover')等等）时，我发现它很有帮助，因此当我回读代码时，总是可以直观地看到究竟发生了什么以及何时发生了什么。

另外，console.log()大量使用。记录所有内容并观察结果是什么。并且，将您的文本编辑器/jsfiddle/firebug 等视为一个无限大的速写本，它会告诉您什么时候无法工作：这是一件很棒的事情，尝试一切，并犯很多错误！这是最好的学习方式。

于 2012-12-10T14:25:40.090 回答
0

尝试这个：

$(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");
    });
});​
于 2012-12-10T14:15:12.457 回答
0

$(".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);
});
于 2012-12-10T14:07:20.800 回答