Question

我有一个PHP文件，它提供从MySQL数据库填充的JSON数组并加载到DOM中。此数据通过jQuery getJSON（）方法加载到HTML文档的#navContent区间。这就像计划一样。

在HTML文档的最底部，我有一个click函数，它针对动态加载到DOM中的#navItem div，但这并不会触发。我假设在动态填充数据时不保留<li ID = 'navItem'...。??

我有什么不对？现在，我只想要动态创建到#navContent div中的所有除法点击直到URL。

<html>
. . .
<head>
. . .
<script type="text/javascript">

    var ajaxLoader = '';
    var container = "navItem";
    var appendE = "navContent";
    var dns = 'http://192.168.1.34';
    var navContent = '/andaero/php/regulatory_list.php';
    var bodyContent = '/wiki/index.php/Airworthiness_Directive #content';

    <!-- ================ When Ready Do This ============================ -->
    <!-- **************************************************************** --> 
    $(document).ready(function(){
          loadNav(dns + navContent, container, appendE);//<- This gets loaded into the navContent<div
          loadPage(dns + bodyContent, "bodyContent");

     });
   . . .
</script>
<body>
    . . .
<div id="navScrollContainer" class="navContentPosition">
                <div id="navContent" >
                    <li id="navItem" style="display: none;">
                        <h1 class="navH1"></h1>
                        <h2 class="navH2"></h2>
                        <p class="navP"></p>
                        <hr class="navHR" />
                    </li>
                </div>
            </div>
. . .
</body>

<!-- ================ Functions ===================================== -->
<!-- **************************************************************** -->

<script type="text/javascript">

    /* --------------- Handle Pg Loading ----------------- */
    function loadPage(url, pageName) {
        $("#" + pageName).load(url, function(response){
    //          transition("#" + pageName, "fade", false);
        });
    };

    function loadNav(url, container, appendE) {
        $.getJSON(url, function(data){

            $.each(data.items, function(){

                var newItem = $('#' + container).clone();

                // Now fill in the fields with the data
                newItem.find("h1").text(this.label);
                newItem.find("h2").text(this.title);
                newItem.find("p").text(this.description);

                // And add the new list item to the page
                newItem.children().appendTo('#' + appendE)
            });

            $('#navHeaderTitle').text(data.key);
            //transition("#" + pageName, "show");
        });

        $('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!
            e.preventDefault();
            $('#bodyContent').load('www.google.com');
        });
    };
</scrip>
</html>

============编辑================

我尝试了一切没有流行的东西。我最终使用Shyju的代码回答了一个修改，以使其工作：根据文档，

.on（events [，selector] [，data]，handler（eventObject）），我将[，data]从标签ID更改为标签类型。即： a 。这个功能现在因为我用标签包装了整个

。见下文：

将HTML更改为：

<div id="navScrollContainer" class="navContentPosition">
    <div id="navContent" >
        <li id="navItem" style="display: none;">
            <a> //<-- ADDED THIS TAG WRAPPER!!
            <h1 class="navH1"></h1>
            <h2 class="navH2"></h2>
            <p class="navP"></p>
            <hr class="navHR" />
            </a>
        </li>
    </div>
</div

将函数更改为（注意.on（）允许在任何TAG元素上发生单击事件 - 甚至是新的元素 - 因为事件是在它起泡到之后始终存在的前一个元素处理的。：

$('#navContent').on('click', 'a', function(e){//<--CHANGED DATA TO 'a'
    e.preventDefault();
    $('#bodyContent').load('http://www.google.com');   
});

Answer 1

对于动态内容，您应该使用jquery on。

http://api.jquery.com/on/

所以你的代码应该是这样的

$("#navScrollContainer").on("click","#navItem").click(function(e){
            e.preventDefault();
            $('#bodyContent').load('www.google.com');
});

但我猜你不应该使用id选择器进行click事件，因为id（和它应该）对于一个元素是唯一的。所以当你加载新内容时，我认为id会有所不同。可能你可以使用所有要点击的元素共同的类名。

on方法仅适用于jQuery 1.7版本。如果您使用的是以前的版本，则应使用Niyaz提到的live。

http://api.jquery.com/live/

Answer 2

而不是：

$('#navItem').click(function(){});

尝试使用：

$('#navItem').live('click', function(){}); // jQuery older than 1.7

或

$('#navItem').on('click', function(){}); // jQuery 1.7 or newer

Answer 3

看起来所有的nav元素都是用相同的ID创建的。此

$('#navItem').click(function(e){ //<-- THIS IS BROKE!! HELP!!

我认为

只适用于其中一个。在克隆时尝试为ID添加某种计数器：

var newItem = $('#' + container).clone();
newItem.attr("id","something_unique_in_here");

单击JSON Array中的动态内容函数

3 个答案: