control-freak-ide/Control-Freak-Documentation/jQuery/docs/entries/delegate.json

{"name":"delegate","type":"method","title":".delegate()","deprecated":null,"removed":null,"desc":"Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.","categories":["events/event-handler-attachment","version/1.4.2","version/1.4.3"],"entries":[{"return":"jQuery","signatures":[{"added":"1.4.2","argument":[{"desc":"A selector to filter the elements that trigger the event.","name":"selector","type":"String"},{"desc":"A string containing one or more space-separated JavaScript event types, such as \"click\" or \"keydown,\" or custom event names.","name":"eventType","type":"String"},{"desc":"A function to execute at the time the event is triggered.","name":"handler(eventObject)","type":"Function"}]},{"added":"1.4.2","argument":[{"desc":"A selector to filter the elements that trigger the event.","name":"selector","type":"String"},{"desc":"A string containing one or more space-separated JavaScript event types, such as \"click\" or \"keydown,\" or custom event names.","name":"eventType","type":"String"},{"desc":"An object containing data that will be passed to the event handler.","name":"eventData","type":"Object"},{"desc":"A function to execute at the time the event is triggered.","name":"handler(eventObject)","type":"Function"}]},{"added":"1.4.3","argument":[{"desc":"A selector to filter the elements that trigger the event.","name":"selector","type":"String"},{"desc":"A plain object of one or more event types and functions to execute for them.","name":"events","type":"PlainObject"}]}],"examples":[{"desc":"Click a paragraph to add another. Note that .delegate() attaches a click event handler to all paragraphs - even new ones.","code":"\n$( \"body\" ).delegate( \"p\", \"click\", function() {\n  $( this ).after( \"<p>Another paragraph!</p>\" );\n});\n","css":"\n  p {\n    background: yellow;\n    font-weight: bold;\n    cursor: pointer;\n    padding: 5px;\n  }\n  p.over {\n    background: #ccc;\n  }\n  span {\n    color: red;\n  }\n","html":"\n<p>Click me!</p>\n\n<span></span>\n"},{"desc":"To display each paragraph's text in an alert box whenever it is clicked:","code":"\n$( \"body\" ).delegate( \"p\", \"click\", function() {\n  alert( $( this ).text() );\n});\n"},{"desc":"To cancel a default action and prevent it from bubbling up, return false:","code":"\n$( \"body\" ).delegate( \"a\", \"click\", function() {\n  return false;\n});\n"},{"desc":"To cancel only the default action by using the preventDefault method.","code":"\n$( \"body\" ).delegate( \"a\", \"click\", function( event ) {\n  event.preventDefault();\n});\n"},{"desc":"Can bind custom events too.","code":"\n$( \"body\" ).delegate( \"p\", \"myCustomEvent\", function( e, myName, myValue ) {\n  $( this ).text( \"Hi there!\" );\n  $( \"span\" )\n    .stop()\n    .css( \"opacity\", 1 )\n    .text( \"myName = \" + myName )\n    .fadeIn( 30 )\n    .fadeOut( 1000 );\n});\n$( \"button\" ).click(function() {\n  $( \"p\" ).trigger( \"myCustomEvent\" );\n});\n","css":"\n  p {\n    color: red;\n  }\n  span {\n    color: blue;\n  }\n","html":"\n<p>Has an attached custom event.</p>\n<button>Trigger custom event</button>\n<span style=\"display:none;\"></span>\n"}],"longdesc":"\n    <p>As of jQuery 1.7, <code>.delegate()</code> has been superseded by the <a href=\"/on/\">.on()</a> method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the <a href=\"/on/\">.on()</a> method. In general, these are the equivalent templates for the two methods:</p>\n    <pre><code>\n// jQuery 1.4.3+\n$( elements ).delegate( selector, events, data, handler );\n// jQuery 1.7+\n$( elements ).on( events, selector, data, handler );\n    </code></pre>\n    <p>For example, the following <code>.delegate()</code> code:</p>\n    <pre><code>\n$( \"table\" ).delegate( \"td\", \"click\", function() {\n  $( this ).toggleClass( \"chosen\" );\n});\n    </code></pre>\n    <p>is equivalent to the following code written using <code>.on()</code>:</p>\n    <pre><code>\n$( \"table\" ).on( \"click\", \"td\", function() {\n  $( this ).toggleClass( \"chosen\" );\n});\n    </code></pre>\n    <p>To remove events attached with <code>delegate()</code>, see  the <a href=\"/undelegate/\">.undelegate()</a> method.</p>\n    <p>Passing and handling event data works the same way as it does for <code>.on()</code>.</p>\n  "}]}