javascript - JQuery从ajax加载中获取元素id数据

Question

我正在使用 JQuery 从 PHP 页面加载数据，它工作正常。现在我希望当我单击这些加载的元素之一时，警报会显示所选元素的 ID。我能怎么做？因为我想稍后使用ajax发送if。我尝试了这段代码，但没有成功。

HTML

 <li><a href="#"><strong>CATEGORY</strong><span> MENU ELEMENTS</span></a>
        <ul class="sub-menu">
            <li><a id="id_1" data-target='post_category'>Sub_1</a></li>
            <li><a id="id_2" data-target='post_category'>Sub_2</a></li>
            <li><a id="id_3" data-target='post_category'>Sub_3</a></li>
            <li><a id="id_4" data-target='post_category'>Sub_4</a></li>
            <li><a id="id_5" data-target='post_category'>Sub_5</a></li>
            <li><a id="id_6" data-target='post_category'>Sub_6</a></li>
            <li><a id="id_7" data-target='post_category'>Sub_7</a></li>
         <ul>
  </li>

JQuery

<script>

    $(document).on("click", "a", function() {
        alert('worked!');
    });

</script>

发送数据代码

$(document).on("click","a",function(e){
$.ajax({
type: "POST",
data: "id=" + $(this).attr("id"),
url: "post_category.php"
});
});

正如我所写，警报没有出现，这意味着 JQuery 代码中的单击事件由于某种原因不起作用。

<小时/>

谢谢你的提示，我都尝试过了，但发现问题的原因是使用ajax加载页面的脚本。

 <script>
        $(document).ready(function(){
            //set trigger and container
            var trigger = $('#nav ul li a'),
                container = $('#container');
            //do on click
            trigger.on('click', function(e){
                /***********/
                 e.preventDefault();

                //get the link location that was clicked
                pageurl = $(this).attr('href');



                //to change the browser URL to th  if(pageurl!=window.location){
                  window.history.pushState({path:pageurl},'',pageurl+'.php');



               /* reload content without refresh */
                //set loading img
                $('#container').append('<div id = "loading">WAIT...  <img src = "img/ajax-loader-small.gif" alt="Currently loading"   /></div>');
                //change img location to center
                $("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
                //get the  trigger to reload the contents
                var $this = $(this),
                    target = $this.data('target');

                container.load(target + '.php');


                return false;

            });
        });
        // fix url in the browser when click on backward and foreword  arrows
        $(window).bind('popstate', function() {
            $.ajax({url:location.pathname+'?rel=tab',success: function(data){
                $('#container').html(data);
            }});
        });



    </script>

我真的不知道哪个部分导致了这个问题。请帮忙/

Answer 1

我认为问题在于您对单击了哪个元素的识别。我会这样做:首先，在 html 中将 id 移动到 li 元素

<ul>
<li><a href="#"><strong>CATEGORY</strong> MENU ELEMENTS</a>
<ul class="sub-menu">
  <li id="id_1"><a data-target="post_category"></a>Sub_1</li>
  <li id="id_2"><a data-target="post_category"></a>Sub_2</li>
  <li id="id_3"><a data-target="post_category"></a>Sub_3</li>
  <li id="id_4"><a data-target="post_category"></a>Sub_4</li>
  <li id="id_5"><a  data-target="post_category"></a>Sub_5</li>
  <li id="id_6"><a data-target="post_category"></a>Sub_6</li>
  <li id="id_7"><a data-target="post_category"></a>Sub_7</li>
</ul>
</li>
</ul>

然后您应该能够通过以下方式获取 id:

jQuery("#container-fluid > section > div > div.box-body > ul > li > ul").children().on("click", function() {
    alert('worked!');
    alert(this.id);
});