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

我有一个PHP文件，它提供了一个从MySQL数据库填充的JSON数组，并加载到DOM中。该数据通过jQuerygetJSON（）方法加载到HTML文档的#navContent分区中。这是按计划进行的。

在HTML文档的最底部，我有一个点击函数，它的目标是动态加载到DOM中的#navItemdiv，但它不会触发。我假设在动态填充数据时不会保留<li ID = 'navItem'...。。？？

我做错了什么？现在，我只想让所有动态创建到#navContentdiv中的分区点击到一个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回答的代码，只做了一个修改就可以让它发挥作用：根据文档，

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

将Function更改为（请注意，.on（）允许在任何TAG元素上（甚至是新的TAG元素）发生点击事件，因为该事件由之前出现的元素在冒泡到那里后处理。：

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

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

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

所以你的代码应该像这个

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

但我想您不应该为click事件使用id选择器，因为id对于元素是唯一的。因此，当你加载新内容时，我相信id会有所不同。也许您可以使用类名，这对于所有要单击的元素都是通用的。

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

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

代替：

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

尝试使用：

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

或

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

它会出现，这样所有的导航元素都是用相同的ID创建的。这个

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

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

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

相关内容

最新更新

热门标签：