Make a selector behave like another in jQuery

Question

I have a selector for the id="original" element that triggers on click a function called on_click_behaviour and I need another selector id="other" to mimic/inherit all of its behaviours or just the click.

How can I make the other selector inherit all the functions from the original so that when i click the other selector it will trigger the on_click_behaviour as well?

// can not touch this code as it's core
$( "#original" ).click(function() {
  on_click_behaviour();
});

<div id="original">close window</div>

<div id="other">close same window</div>

I am looking for something like this:

$( "#other" ).inherit_behaviours_from( "#original" );

What you're describing doesn't really make sense. Selectors can't "trigger" functions and `id="original"` is not a selector, it a attribute. Selectors can't mimic behavior or inherit behavior because selectors are *strings* that don't "do" anything. Please show us some code as a demonstration of what you have, and what you're trying to achieve. — user229044, Dec 16 '16 at 02:52
@meagar OP has described the requirement at text of Question adequately. The requirement is to trigger an event handler for `#original`, or the same event handler attached to `#original` when event is dispatched at `#other`, either programmatically or by user action. Essentially using the same event handler for both elements. Possibly setting `this` at the handler when the event is dispatched. — guest271314, Dec 16 '16 at 02:54
@Mauro Do you only want to call the same event handler for `#original` as `#other`, or also set `this` within the event handler of `#original` when `click` occurs at `#other`? Why cannot you attach the same event handler to `#other`? Or use selector `$("#original, #other").click(function(){behaviour();})` to attach same event to both elements? — guest271314, Dec 16 '16 at 03:07

user229044 · Answer 1 · 2016-12-16T03:07:07.170

3

You are badly muddling your terms.

Selectors are strings that match 0 or more elements on the page
Selectors cannot trigger events
Inheritance doesn't apply here
You cannot click on selectors

What you're doing is using a selector to find an element, and then binding a function to some event that will be triggered by an interaction with that element.

What you're trying to do is bind the same behavior to a second element.

In order to add the same handler to an additional element, you just need to select the second element in addition to the first. You can do that by adding the two selectors together, delimited by a comma:

$('#original, #other').click(function () {
  behavior();
})

This will select the element with id="original" and the element with id="other" and then bind the same click-handling function to both of them.

edited Dec 16 '16 at 03:07

answered Dec 16 '16 at 03:04

user229044

232,980
40
330
338

This is correct, but i can not touch the "original" function. I can only add another piece of code to "inherit" the behaviours of the "original". Thanks – Mau Dec 16 '16 at 03:05
2

@Mauro Why can't you touch the original function? – user229044 Dec 16 '16 at 03:09
i can't touch it because it's core – Mau Dec 16 '16 at 03:52
@Mauro Only you are aware of the meaning and significance of "core". Adding "core" as reason why you cannot change the `javascript` does not elaborate on what "core" is. Take note of the information within this Answer. `id="original"` is not a selector, but an attribute name and value pair at an `html` `document`. See [HTML Standard 3.2.4.1 Attributes](https://html.spec.whatwg.org/multipage/dom.html#attributes), [Selectors Level 3](https://www.w3.org/TR/css3-selectors/) – guest271314 Dec 16 '16 at 04:01
it's a plugin that i can not touch. id="original" is not a selector it's an identifier of a selector for the sake of understanding. please reword it so that it's more understandable and i will update my question. – Mau Dec 16 '16 at 04:16

score 3 · Accepted Answer · answered Dec 16 '16 at 03:13

If you just need to use the functionality that happens when you click the "original" element and it does not involve any variables that are different between the "original" and the "other", you can use this solution. It doesn't look very good, but it works.

$( "#other" ).click(function() {
  $("#original").click();
});

guest271314 · Answer 3 · 2016-12-16T03:27:48.793

You can use .trigger() to dispatch the click event attached to #original which calls handler assigned to handler click event.

function on_click_behaviour() {
  console.log("clicked")
} 

// can not touch this code
$("#original").click(function() {
  on_click_behaviour();
});

$("#other").click(function() {
  $("#original").trigger("click");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="original">close window</div>

<div id="other">close same window</div>

You can alternatively get the event handler attached to #original" DOM element using $._data(), then attach the handler assigned to #original to #other.

function on_click_behaviour() {
  console.log("clicked")
} 

// can not touch this code
$("#original").click(function() {
  on_click_behaviour();
});

var originalHandler = $._data($("#original")[0]).events.click[0].handler;

$("#other").on("click", originalHandler);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="original">close window</div>

<div id="other">close same window</div>

what would happen if i don't know that the function is an event on "click" ?? could i just inherit every attached function ?? — Mau, Dec 16 '16 at 04:19
@Mauro _"could i just inherit every attached function ??"_ Yes. You can iterate `$._data($("#original")[0]).events` object [Find elements with click event](http://stackoverflow.com/questions/24744967/find-elements-with-click-event/) — guest271314, Dec 16 '16 at 04:24

Make a selector behave like another in jQuery

3 Answers3