Detailed explanation of how the delegate method in jQuery implements Ajax request binding events without losing them-JS Tutorial-php.cn

Detailed explanation of how the delegate method in jQuery implements Ajax request binding events without losing them

黄舟

Release： 2017-06-26 10:12:14

Original

1547 people have browsed it

After binding a click event to an element, I encountered a problem: when executing some ajax requests and calling this page again, the click event inside became invalid

For example: My paging is an ajax request, but when I click on the next page, the element a generated does not have a click event.

Problems encountered when doing projects by myself:

Purpose: Delete checkboxes in batches. When you click to delete, the onclick event bound to the button using jquery is triggered to obtain the values of all checkboxes.

1. There is no problem when directly injecting smarty into the call page for the first time. When the page is called again to list records based on conditional query (Ajax implementation), the click event fails

Reason: ajax loading content is an operation after $(document).ready(). At this time, When binding the function, the set of elements found does not include the content loaded by ajax, so there is no problem with the original one, but the later loaded ones are not bound.

Final solution:

1. Use jQuery’s delegate() method

2. Use native js to write the value of the check box into the submission verification function.

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">

Copy after login

There is a value, the verification is passed, and the value is assigned to a hidden field value

No value, return

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){   　　　　　　　　　　　　　　　　给全选按钮value设置为on  排除此选项
                       compatibility += value + ","; 　　　　　　　　　　拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的，

 

if(!compatibility){　　//如果字符串为空 ，返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除？&#39;);
       }

 

}

Copy after login

##Solution:

1. In ajax request Rebind the event after success

2
. Use jquery's delegate(sel,[type],[data],fn) method The live() method has been deprecated

$(document).delegate('a', 'click', function() { blah() }) Solve the binding event Ajax request without invalidation

Specify Add one or more

event handlers to elements (which are child elements of the selected element) and specify functions to be run when these events occur.

Event handlers using the delegate() method apply to the current or future elements (such as new elements created by scripts).

Parameters:

selector:Selector string, used for filterelements that trigger events.

type:One or more events attached to the element. Multiple event values separated by spaces. Must be a valid event.

data:Extra data passed to the function

fn:Function to run when the event occurs

$(function(){
$(&#39;#deleted&#39;).delegate("button",&#39;click&#39;,function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$(&#39;input:checkbox:checked&#39;).each(function() {                
checked.push($(this).val());            
});            
$(&#39;#getvalues&#39;).val(checked);  //给隐藏域设置属性        
})
})

Copy after login

Perfect solution Question, haha!

Extension:

In the old version of jQuery, when you need to respond to an event on the page content of a certain fragment loaded by ajax on the page, you can use live function to respond to its events, such as: $('a').live('click', function() { blah() });

In newer versions of jQuery, the live function has been abandoned Used,

Then how to implement the function of the live function in the new version, that is, when the page fragment is loaded by ajax, how does the content in this page fragment respond to related events?

There are several methods. This article only provides two simple ones:

One is to directly import jquery-migrate so that the live function can Use, but do not optimize performance.
The other is to use the delegate function to implement the live function

$(document).delegate(&#39;a&#39;, &#39;click&#39;, function() { blah() });

Copy after login

The above is the detailed content of Detailed explanation of how the delegate method in jQuery implements Ajax request binding events without losing them. For more information, please follow other related articles on the PHP Chinese website!