ajax怎么渲染数据并插入样式

1、打开HBuilderX工具，创建Web项目，新建静态页面ajax.html。

2、打开已新建的ajax.html文件，引入jquery文件并修改title标签内容。

3、在标签中，插入一个div标签，并在div标签中插入一个table。

4、接着在项目中的data文件夹下，新建user.json文件。

5、打开user.json文件，添加json格式数据。

6、在标签中，jquery初始化函数，调用ajax()方法读取json文件数据，返回成功后，将数据渲染加到table中。

7、再添加一个style标签，利用元素选择器设置表格样式。

8、保存代码并运行页面文件，打开浏览器查看效果，即可看到一个表格。

因为你添加的ajax数据在js执行之后，也就是说$('.test').click这个方法在js执行之后没有被绑定在click上面。这个时候需要动态绑定，把事件绑定在js执行完成之前就存在的元素上面，例如下面的例子我绑定在table上面，然后用on()来绑定click，on其实可以接受三个参数，如果第二个是字符串的话，就是动态绑定的元素。

<table id="table">

<tr>

<td>11111</td>

</tr>

</table>

<script>

setTimeout(function() {

$('#table').append('<tr><td class="test" id="12">id12</tr><tr><td class="test" id="13">id13</tr><tr><td class="test" id="14">id14</tr>')

}, 1000)

$('#table').on('click', 'td.test', function() {

var test_id = $(this).attr('id')

console.log(test_id)

})

</script>

假设你的HTML结构如下：

<div>

    <div>1</div><ul><li>2</li></ul>

    <p>这是P</p>

    <button>按钮</button>

</div>

因为div标签里的内容是你ajax获取后加载进来的，属性动态添加的，绑定事件，推荐用on，当然delegate也一样。

//因为你div内的内容是动态添加的，但这个div肯定不是吧，

//所以把事件绑定在div上，当发生点击时，判断点击的如果是按钮的话，就执行我们要做的事

//这就是jquery是实现为未来元素绑定事件的方法。

$("div").on("click","button",function(e){

    var $this=$(e.target)//这个就是被点击到的按钮

    var $parent=$(this).parent("div")//这个就是div了

    //获取到div了，我们在直接查找里面的p就行了：

    var $p=$parent.find("P")

})

---