javascript - innerHTML后加入的标签元素无法触发类库事件 ？

Question

使用 innerHTML AJAX后添加新的标签元素，
含有使用jq.mobile或者 Bootstrap类库特定的的一些class或者ID产生不同的事件或者不同的样式，
而经常出现的情况是元素没有被渲染或者JS没有执行，没有绑定到事件，
我想问问有什么办法能解决吗？

---

举个简单的例子

jquery.mobile里面
有一个滑动的滚动条
html是
<input  style="" type="range" name="choice" min="1" max="10" value="2"/>

会被类库识别然后被他的CSS渲染改变样式

但是如果是innerHTML在JS中后加入的，就渲染不到，没有其特别的样式

相似的还有其他类库也有这种情景，大多是CSS没渲染到或者JS本身类库对其绑定的事件没有触发。而自己写的并没有这个问题

Answer 1

1.先说下事件绑定：可以了解一下比较新的jQuery版本中的的on方法，基本上可以取代之前习惯用的事件绑定的方法了。然后用下面这样的方法就可以给动态添加的dom绑定事件了，思路就是将新生成的元素类的事件委托给一开始就存在的父容器进行处理。假设动态插入的p类名是.child,他们的父容器id是#parent.

$('#parent').on('click', '.child', function() {
    console.log('新旧插入的子元素的的点击事件都会冒泡到parent后进行处理，因此不需要插入后再重新绑定事件');
})

2.jq.mobile我没有亲身用过，不过这个问题应该和许多bootstrap插件一样的，只在页面加载时初始化一遍，后续界面发生变化时需要调用插件提供的reflesh的相关方法更新一下，一般比较完善的插件都会有这个方法。如果没有那这个插件基本上就太水了，直接换一个吧！

Answer 2

在父元素上用jQuery的delegate，通过冒泡处理，如: $('.parent').delegate('.subEle', 'click', function(e){}.

Answer 3

<input style="" type="range" name="choice" min="1" max="10" value="2"/>

上面HTML元素属性大部分都是声明式的，依赖于在页面第一次加载的时候类库函数的解析，然后绑定的相应的事件中.
你通过innerHTML插入的HTML代码，类库是无法知晓的

除非类库提供JS方式插入自定义组件的方式
例如

$('input[name=choice]').rangeInput({
    min:1,
    max:10,
    initValue:2
    onChange:function(){
    ...
    }
});

或者直接干脆通过类库方法，刷新页面局部，强制解析声明式的HTML（如果有的话）
例如：

$('input[name=choice]').parent().refresh();

Answer 4

$(document).on('click', '.child', function() {
    //现在一般都这么写，像表格类增删改的元素都可以渲染。
})

Answer 5

我是在ajax里面回传触发的js，按钮啥的用onclick

Answer 6

1. 将事件绑定到父元素上

2. 插入完成后重新绑定一次事件。

Answer 7

1.如上面@老刘所说的委托方法
2.可以监听后加入的元素的父元素的事件，比如父元素<p></p>，后加入元素<span><span>，可以写好父元素<p>的事件（比如点击事件），这样在以后加入<span>的时候，点击<span>处同样有效果，只是这种方法比较片面，如果能解决你的问题固然是好。

Answer 8

建议在insertHtml后，再给对应的元素添加对应的事件。不然是不起作用滴！

Answer 9

因为innerHTML替换了DOM节点，绑定在原DOM节点上事件自然也被替换了。
优雅点的解决方法就像前面说的，利用冒泡机制，使用事件代理解决，简单点就在innerHTML之后再绑定一次事件。。。

Answer 10

其实jquery的delegate方法还有on,或者比较笨的方法就是直接在元素上用onclick