jquery事件在使用Datatables插件的表格只有第一页生效解决方法 @勤勤学长

一开始我还以为代码写错了，因为我用来测试的表格数据都放在后边，点击删除按钮都没用反应。

然后发现连其他事件都没反应了，比如change。

通过排查法得知，第一页的数据正常，翻页之后的数据就不行了。

搜索后知道解决方法：

 

使用jquery中的on方法。

$(selector).on(event,childSelector,data,function)；

 

实例代码：

     <table id="example" class="am-table am-table-bordered table"  width="100%">
        <thead>
            <tr>
                <th>#</th>
                <th>ico地址</th>
                <th>链接标题</th>
                <th>链接地址</th>
                <th>排序</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        	{foreach $data1  as $vo}
            <tr>
            	<input type="hidden" name="url_id[]" id="url_id[]" value="{$vo.id}" />
                <td>{$vo.id}</td>
                <td><input class="am-u-md-20 form-control ico_url" name="ico_url[]" placeholder="不填写调用调用默认ico地址" value="{$vo.ico_url}"></td>
                <td><input class="am-u-md-8 form-control title" name="title[]"  placeholder="输入链接标题" value="{$vo.title}"></td>
                <td><input class="am-u-md-18 form-control url"  placeholder="输入链接地址" name="url[]" value="{$vo.url}"></td>
                <td><input class="am-u-md-6 form-control sort"  placeholder="输入排序数字" name="sort[]" value="{$vo.sort}"></td>
                <td><input type="button" id="delete[]" value="删除" class="am-btn am-btn-danger" name="delete[]" url_id='{$vo.id}' /></td>
            </tr>
            {/foreach}
        </tbody>
    </table>

<script type="text/javascript">
    
    $(document).ready(function() {

     	$('#example').dataTable();

    $('.table tbody').on('click','input[name="delete[]"]',function(){

	  alert('666');

    });

		});     	
	});
</script>

参考链接

jQuery on() 方法：http://www.runoob.com/jquery/event-on.html

datatables 组件翻页后 JS 不生效：https://www.oschina.net/question/97615_163097