The Safari_jquery of jquery event delegation

What is an event delegate

An event delegate is a way of binding events in jquery, unlike common event bindings that bind events to target elements, and instead bind events to the parent element to perform binding functions through event bubbling.

Common event binding (jquery)
$ (Element). Click (function () {
//do something
})
//Event delegate (jquery)
$ (parents). On ("Click", Element,function () {
//do something
})

The principle of event delegation

An event delegate listens to the parent of the target element and, when the target element responds to the event, bubbles to the parent of the binding event to determine whether the target element of the event is an incoming element and, if so, to execute the passed-in function.

Simple implementation of jquery event delegate
<ul id= "oparent" ></ul>
<a id= "Oclick" href= "javascript:void (0)" >click </a>
<script type= "Text/javascript" >
var oparent=document.getelementbyid ("Oparent"), oclick= document.getElementById ("Oclick");
Object.prototype.on=function (ev,fn,obj) {
var sclass=object.prototype.tostring.call (obj);
if (obj| | Sclass.indexof ("HTML") ===-1) {//pretend to judge if an event delegate
This.addeventlistener (Ev,function (e) {
var e=e| | window.event;
if (E.target===obj&&e.type===ev) {
fn.call (e.target);//Incoming target element
}
},false);
else{
This.addeventlistener (ev,fn,false);
}

Do not do any compatibility and other processing, just to understand the principle, we have any questions to note.
What's the use of event delegates?

With so many things to say, what is the use of event commissions? I think the greatest benefit of event delegates is that dynamically generated elements also retain their original event bindings.

A click, the UL will add an Li, new Li have binding event
<ul id= "Oul" >
<li><li>
</ul>
<a id= " Addbtn "href=" javascript:void (0) "target=" _self "> Add li</a>
<script>
//Use common event bindings to implement
$ (" # Oul "). Find (' Li '). On (" click ", Function () {
//do something
})
$ (' #addBtn '). On (" click ", Function () {
$ ("#oUl"). Append ("<li></li>");
$ ("#oUl"). Find (' Li '). On ("click", Function () {
//do something
})
})
///No performance issues, such a nice, logical implementation
//Use event delegates to implement
$ ("document"). On ("click", "#oUl li", function () {//The delegate element is flexible, as long as it is a parent. Just not a dynamic build (the meaning of a dynamic build loses an event delegate)
//do something
})
$ ("#addBtn"). On ("click", Function () {
$ ("#oUl"). Append ("<li></li>");
})
This kind of code is not much simpler, solve the problem of repeated binding

Today's theme, the Sarfari of event delegation

Problem encountered in a project, the Click event delegate fails on safari on the mobile side

<p class= "Loadmore" > Load more </p>
<script type= "Text/javascript" >
$ (document). On ("click", ". Loadmore ", function () {
alert (" OK ")
})
</script>

Look at the code above, very simple, no problem, in addition to iOS safari, other browsers can be normal pop-up "OK", the first thought will be what there is a place to bubble stopped, but did not find, JQ problem? , change or not. Normal binding (not using event delegates) No problem, other think will be JQ bugs, if it is JQ bug, then the previous project will have similar bugs, so go to the line to find the relevant code

<a id= "test" target= "_slef" href= "javascript:void (0)" >test</a>
<script>
$ ("document"). On ("Click", "#test", function () {
//do something
})
</script>

Testing on Android and iOS devices, there is no problem, the code is the same, but you notice no, the label is not the same (HTML semantics more important AH), so the p to a, the problem is perfect solution, finally to Google a bit.

In Safari in iOS when you add a click event to an element using a delegate, if the event is delegated to document or body, and the element of the delegate is not clickable by default (such as Div, span, etc.), the Click event is invalidated.

The reason is clear, the Click event in Safari that is not clickable element will not bubble to document and body.

Solutions

1. Bind the Click event directly to the element (do not use event delegates)

2. The element that needs to bind click event to change to <a> or <button> etc. clickable element

3. Delegate the Click event to a parent element that is not doucument or body

4. Add a CSS style to the target element Cursor:pointer (recommended, easy to save)

The above is a small set to introduce the jquery event commissioned Safari, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!