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代码中的click事件由于某种原因不起作用。

感谢您提供我的所有提示，但是从使用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);
});

Answer 2

尝试以下代码。它工作正常。

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

<script type="text/javascript">
    $(".abc").click(function () {
        var id_value = $(this).data('id');
        alert(id_value);
    });
</script>

Answer 3

我相信您在将链接添加到dom之前设置了点击事件。 Ajax调用与常规函数略有不同。它们不会阻止您的代码，所以当您执行ajax调用时，javascript会调用该函数并且不会等待响应。它实现了其余的功能。

更简单的功能版本

 $.get(url, function (data) {
        // success -> Usually just calling your function here solves the problem. 
    }).done(function () { 
        setupClickListener(); // If it doesn't append this to it for extra security.
    });

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

Answer 4

问题是在装货收据中返回false。

我删除了返回false并保留e.preventDefault();所以它会做同样的事情。

JQuery从ajax中获取元素id数据

4 个答案: