我js拼接一段html,然后里面的元素无法识别,导致无法触发事件。。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我js拼接一段html,然后里面的元素无法识别,导致无法触发事件。。相关的知识,希望对你有一定的参考价值。

我同事说“html拼接的这段js要先执行 ”,我js这块也不熟,不知道怎么弄!

<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>YuGiOh</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
    
    var body = $ ('body');
    $ (":button").click (function ()
    
    body.append ('<a class="details" href="#">详情</a>');
    );
    
    // 动态插入的html,需要委派事件处理。
    body.delegate ('.details', 'click', function ()
    
    alert ($ (this).index (".details"));
    )
    )
</script>
</head>
<body>
<button>insert</button>
</body>
</html>

参考技术A 先保证dom有这个元素,才能执行这个元素相对应的动作 参考技术B 问题能再具体点么追问

详情

拼接的这个。然后 $("#details")的事件就无效了

追答

你需要先保证有这个节点对象,详情这个是什么时候添加上去的

参考技术C 把你拼接的那一段贴出来看看追问

详情
拼接的这个。然后 $("#details")的事件就无效了

追答

首先,你得确保你拼接没有语法错误,其次,你的事件应该用:

$(".details")

追问

是的 ,用的是你说的这个 ,我知道原因是因为拼接出来的,是没办法识别这些元素的,不知道怎么解决

追答

你是想把详情拼接出来,插入到DOM里面去,然后再为它绑定事件?

追问

是的

追答

不知道你要实现的是怎样的功能,但下面这个你可以参考一下:

<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    
    <body>
        <div id="test">点击插入A</div>
        <div id="aaa"></div>
    </body>

</html>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function() 

        $("#test").on("click",
        function() $("#aaa").html("<a class=\\"details\\" href=\\"#\\">详情</a>");  
        );

        $("#aaa").on('click', '.details',
        function() 
            alert("QQQ");
        );
    );
</script>

一直无法获取到页面上一个元素js

①前言

流程审批页面我写了一个公共的模板页面,但是里面的数据是动态添加进去的。我想在公共的页面的js中去隐藏一个元素。

②我的思路:

我准备直接通过id去获取元素,然后添加属性 display:none

首先我通过jquery的方法: 

var v1 = $("#shenpiyijian");
console.log(v1)
//结果为n.fn.init()

我最初以为这就拿到了对象,然后直接设置属性  v1.css("display","none")  结果没有效果。

后面大牛采用的是

var  v2 = document.getElementById("shenpiyijian");
console.log(v2)
//null

发现为v2位null

哦,原来是没有拿到这个元素。

总结:=========

在测试的时候可以现在浏览器控制台写js代码。如果有问题的时候,最好用js代码而不是jquery代码。因为所有浏览器都支持js代码。


------------------------------------------------------------------------------------------------------------------------

后面发现没有取到元素,所以我就按照自己的方式去ifram中去找元素。其实这根本就不是ifram的问题,网上找了一大堆。


后面找了大牛。

大牛首先在控制台获取了数据,然后发现能获取,在js代码中写了,发现不能获取。

估计是加载顺序问题。

-----------------------------下面 ,重要一步---------------------

我们在页面中写了一个button,将获取元素的代码写在了一个方法中,点击这个button,发现能获取到数据。

-----------------------------重要一步---------------------

然后找,我们的代码是写在ready里面的,即页面加载完成,但是为什么无法获取呢,后面他们说loadUrl这个方法是异步的,业务数据还没加载完成的时候页面js就执行完了。

然后我们把代码写在了loadUrl中。这样就是同步执行了。

总结:其实就是数据还没加载完就执行了js。


总结:

①对于编程,是什么就是什么,不要猜测或无端自己加入一些自己的想法。

比如这本来不是一个ifram,非得自己认为是一个ifram,这样不利于去找问题。

②注意同步异步,注意方式方法。

以上是关于我js拼接一段html,然后里面的元素无法识别,导致无法触发事件。。的主要内容,如果未能解决你的问题,请参考以下文章

IBM Worklight - jQuery 无法识别 html 页面上的任何元素

原生JS如何修改某一段样式

js怎么实现一段文字的显示有个明显的过渡效果

js - 运用内嵌来实现动态布局

无法使用 JS 访问我的 html 文件中的“标题”元素

一直无法获取到页面上一个元素js