V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
dongchen
V2EX  ›  问与答

想问下,使用了 jquery 的 .html() 在网页上添加的 html 内容,在网页源代码中是没办法查看到的吗?

  •  
  •   dongchen · 2020-02-21 15:05:54 +08:00 · 1046 次点击
    这是一个创建于 1755 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之所以这么问是因为,使用 jquery 在网页上显示了一个列表,现在想实现列表行批量删除的功能,选择 select_all 后所有复选框都会被选上,如果其中一个框被取消选择,那么 select_all 则取消被选上。 js 代码

    $("#select_all").change(function(){
        $(".checkbox").prop('checked', $(this).prop("checked"));        
    });
    
    $('.checkbox').click(function(){     
        if($(this).prop("checked") == false){
            $('#select_all').prop('checked', false);
         }
    });
    

    列表头部是写在 html 里的

    <table class="table">
      <thead>
        <tr>      
          <th scope="col"><input type="checkbox" id="select_all" /></th>
          <th scope="col">用户名</th>
          <th scope="col">登录时间</th>
          <th scope="col">全名</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody id='adminlist_tbody'></tbody>
    </table>
    

    列表的 tbody 是用 jquery 加载的

    $('#adminlist_tbody').html(data.adminlist_tbody);
    $('#pagination_link').html(data.pagination_link);
    

    后端用的是 php 的 ci 框架

    $tbody = '';
    foreach($results as $result)
    {
    	$tbody .= '
    	<tr>      
    		<td><input type="checkbox" class="checkbox" data-id="'.$result['id'].'" /></td>
    		<td>'.$result['username'].'</td>
    		<td>'.$result['logintime'].'</td>
    		<td>'.$result['fullname'].'</td>
    		<td>
    			<a class="btn btn-primary" href="#">编辑</a>
    			<a class="btn text-white bg-danger" href="#">删除</a>
    		</td>
    	</tr>
    	';
    }
    
    
    $data = array(
    	'pagination_link'  => $this->pagination->create_links(),
    	'adminlist_tbody'   => $tbody
    );
    
    
    exit (json_encode($data));
    

    列表成功后发现,tbody 中的内容不会显示在 html 源码中,导致

    $('.checkbox').click(function(){     
        if($(this).prop("checked") == false){
            $('#select_all').prop('checked', false);
         }
    });
    

    无法运行生效。 请问这个问题有什么好的解决方法吗?

    PS. php,js 新手😂

    5 条回复    2020-02-22 10:09:17 +08:00
    ysc3839
        1
    ysc3839  
       2020-02-21 18:54:37 +08:00 via Android
    不要在网页加载时设置事件,动态加载网页代码之后再设置事件。
    ysc3839
        2
    ysc3839  
       2020-02-21 18:56:08 +08:00 via Android
    或者后端改成直接返回原始数据,前端 js 进行网页渲染,这样在渲染的时候可以直接设置事件。
    ji39
        3
    ji39  
       2020-02-21 22:09:32 +08:00 via Android
    jquery
    ji39
        4
    ji39  
       2020-02-21 22:11:06 +08:00 via Android
    使用 jquery on()
    dongchen
        5
    dongchen  
    OP
       2020-02-22 10:09:17 +08:00
    @ji39
    @ysc3839


    ```
    $(document).on('click','.checkbox',function(){
    if($(this).prop("checked") == false){
    $('#select_all').prop('checked', false);
    }
    });
    ```
    使用上面的代码就不会失效了,单独使用 jquery on() 还是不行,需要 $(document).on 才可以 ,想问下这两者有什么区别
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   910 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 22:39 · PVG 06:39 · LAX 14:39 · JFK 17:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.