JavaScript 在 AJAX 返回的内容中不起作用

Question

以下代码适用于普通页面，但不适用于 AJAX 返回的内容。 我尝试将脚本连同内容一起返回，但它不起作用。我没有使用 jQuery。我希望它在 JavaScript 中完成。

window.onload=function(){

var bulkdeletebutton = document.getElementById('bulkdeletebutton');
bulkdeletebutton.addEventListener('click',function(e){

   if(document.querySelectorAll('.deleteclass:checked').length==0){
      alert('Please Select atleast one item to delete');
      e.preventDefault();return false;
   }
   if(confirm('Do you really want to Delete?')){
         document.getElementById('categoryform').submit();

   }
   e.preventDefault();
});
}

下面是ajax

    <script>
    window.onload=function(){
       document.getElementById('categoryname').addEventListener('change', function(){
           var catid = (this).value;
           loadsubcategory(catid);
       });

    }
    function loadsubcategory(catid){
        var xhr = new XMLHttpRequest();
        var url = 'ajaxsubcategory.php?catid='+catid;
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && (xhr.status >=200 || xhr.status <=300 || xhr.status ==304)){

                document.getElementById('fromajax').innerHTML=xhr.responseText;
            }
        }

        xhr.open('get',url,true);
        xhr.send(null);
    }
    var catid = document.getElementById('categoryname').value;
    loadsubcategory(catid);
    </script>

下面是使用ajax返回的页面

    <form method="post" id="categoryform">
                          <table width="100%" class="table table-striped jambo_table bulk_action">

                            <thead>

                              <tr class="headings">

                                <th width="137" nowrap="nowrap">

                                 S&Delete

                                </th>
                                <th width="130" class="column-title">ID</th>
                                <th width="130" class="column-title">Name</th>
                                 <th width="130" class="column-title">Status</th>
                                <th width="89" class="column-title no-link"><span class="nobr">Action</span>

                              </tr>

                            </thead>



                            <tbody>

                            {section name=i loop=$subcategories}

                              <tr class="even pointer">

                                <td class="a-center ">

                                  <input type="checkbox" class="flat deleteclass" name="table_records">

                                </td>
                                <td class=" ">{$smarty.section.i.index+1}</td>
                                <td class=" ">{$subcategories[i].name}</td>
                                <td class=" ">{$subcategories[i].status}</td>

                                <td class="">

                                    <div class="table-icons">

                                        <a href="editsubcategory?ID={$subcategories[i].id}&act=edit"  target="_blank" title="View">

                                            <i class="fa fa-eye" aria-hidden="true"></i>

                                        </a>


                                        <a href="subcategories?ID={$subcategories[i].id}&act=Delete" title="Delete">

                                            <i class="fa fa-trash-o" aria-hidden="true"></i>

                                        </a>

                                    </div>

                                </td>

                              </tr>

                              {sectionelse}

                              <tr class="even pointer">

                                <td colspan="8" align="center" class="a-center ">No Result Found</td>

                              </tr>

                              {/section}



                              <tr class="even pointer">

                                <td class="a-center ">

                                  <input type="checkbox" class="flat" id="deleteall">
                                </td>

                                <td class=" "></td>

                                <td class=" "></td>
                                <td class=" "></td>

                                <td class=" " align='left'>

                                    <div class="table-icons">

    <input type="submit" value="delete" id="bulkdeletebutton" name="submit"/>

                                    </div>

                                </td>

                              </tr>

                            </tbody>

                          </table>
    </form>
    {literal}
    <script>//below functions are not working
    window.onload=function(){
      document.getElementById("deleteall").addEventListener('click', function(){

         var list = document.getElementsByClassName('deleteclass');
         if((this).checked){
         alert('checked');
             for(var i=0; i<list.length;i++){
               list[i].setAttribute('checked',false);
             }
         }else{
             for(var i=0; i<list.length;i++){
               list[i].setAttribute('checked',true);
             }

         }
      });


         document.getElementById('bulkdeletebutton').addEventListener('click',function(e){

           if(document.querySelectorAll('.deleteclass:checked').length==0){
              alert('Please Select atleast one item to select');
              e.preventDefault();return false;
           }
           if(confirm('Do you really want to Delete?')){
                 document.getElementById('categoryform').submit();

           }
           e.preventDefault();
       });


    }


    </script>
    {/literal}

我已经介绍过了

jQuery click() event not firing on AJAX loaded HTML elements

How to bind Events on Ajax loaded Content?

jQuery doesn't work after content is loaded via AJAX

但我找不到答案。

Answer 1

我真的不明白你的问题，但如果你想在 ajax 返回的内容上绑定事件。这是怎么做的

 <script>
    $(document).on("click", '.class', function(event) { 
        alert("a new event binded!");
    });
    </script>