最新消息:文章中包含代码时,请遵守代码高亮规范!

关于未来元素的问题【原创】

HTML+CSS Eva 2187浏览 0评论

最近在写一个功能时,发现ajax执行失败。不管怎么调试都没有用。后来,才知道是与未来元素有关。效果图如下:
权限1
原先的js代码如下:

    //负责人编辑

    $(".leader_name").click(function(){//点击负责人名称时触发事件

        $(this).siblings(".join_select1").remove();//在每次点击时清空选择框

        var html = '<div class="join_select1 " >';
        <?php foreach ($enabled_users as $enabled) { ?>
        html += "<p  data-id='<?php echo $enabled['user_id']; ?>'><?php echo $enabled['user_name']; ?></p>"
        <?php } ?>
        html += '</div>';
        $(this).after(html);//点击时生成下拉选择框
    })

    $(".leader_name").parent("td").mouseleave(function() { 
        $(this).find('.join_select1').remove();//鼠标移走时,清除选择框
    })

    
    $(".join_select1 p").live("click", function() {
        //通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
        $(this).addClass('selected1').siblings().removeClass('selected1');//给标签增加样式
        var that = $(this);
        var user_name = that.text();
        var leader_id = that.data("id");
        var customer_id = that.parents("td").find(".leader_name").data("customer-id"); 
        var print_str = prompt("请输入大写的UPDATE,以便您修改负责人");
        //prompt() 方法用于显示可提示用户进行输入的对话框。
        if (print_str == 'UPDATE') { 
            $.ajax({
                url: 'index.php?c=permission&a=updateLeader&customer_id=' + customer_id,
                type: 'GET',
                data: { leader_id: leader_id },
                dataType: 'json',
                success: function(data) {
                        that.parent().siblings(".leader_name").text(user_name);//执行ajax后修改负责人
                }
            })
        }
    })

当点击负责人时,会弹出选择框进行选择,从而达到修改的目的。但是在这里会报错,ajax也不执行了。调了半天也没调好,后来才知道有一句话写错了。应该改成:

$(this).find('.join_select1').hide();

出现这样的错误,原因就是在执行ajax之前,未来元素已经不存在了。所以无论如何,ajax都不会执行。看来在未来元素的问题上,还是要多加注意呀。

转载时请注明出处及相应链接,本文永久地址:https://www.askaura.com/6475.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Eva的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!