Назначьте существующую функцию события клика другому событию клика, используя jquery

Question

Хорошо, у меня есть html вроде этого:

<div id="navigation">

<ul>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li>
<a>tab name</a>
<span class="delete-tab">X</span>
</li>

<li class="selected">
<a>tab name</a>
<span class="tab-del-btn">X</span>
</li>

</ul>

</div>

У меня тогда есть javascript, который оправдывается на странице, которую я не контролирую (это на портале liferay). Затем я хочу манипулировать вещами с помощью своего собственного пользовательского JavaScript.

SO ...

Для каждого из элементов span.delete-tab функция события при нажатии была назначена ранее. Это один и тот же вызов функции для каждого диапазона. Я хочу взять эту функцию (любую) и вызвать ее из события click span.tab-del-btn?

Вот что я пытался сделать:

var navigation = jQuery('#navigation');
var navTabs = navigation.find('.delete-tab');

var existingDeleteFunction = null;

navTabs.each(function (i){
        var tab = jQuery(this);
        existingDeleteFunction = tab.click;
});

var selectedTab = jQuery('#navigation li.selected');
var deleteBtn = selectedTab.find('.tab-del-btn');

deleteBtn.click(function(event){
        existingDeleteFunction.call(this);
});

Это не работает, хотя. Существующая функция удаления не является исходной функцией, это некоторая функция по умолчанию в jquery.

Есть идеи?

Answer 1

Я виноват, но было больше информации, которую я понял, что пропустил. Мне нужно удалить элементы .delete-tab после того, как я воспользуюсь одной из функций. Во всяком случае после некоторого возни я нашел это, которое работает. Я хотел бы сделать это на несколько строк кода меньше. Есть идеи ?

var navigation = jQuery('#navigation');
var navTabs = navigation.find('.delete-tab');

var events = jQuery.data(navTabs.get(0), "events");
var clickEvents = events.click;

var existingDeleteFunction = null;

jQuery.each(clickEvents, function(i, val) {
    existingDeleteFunction = val;
});   

navTabs.each(function (i){
    var tab = jQuery(this);
    tab.remove();
});

var selectedTab = jQuery('#navigation li.selected');
var deleteBtn = selectedTab.find('.tab-del-btn');

deleteBtn.bind('click',existingDeleteFunction);

Answer 2

Вы можете сократить код, который вы отправили до этого:

var clickEvents = jQuery('#navigation .delete-tab').data("events").click;
var btn = jQuery('#navigation li.selected .tab-del-btn');
jQuery.each(clickEvents, function(i, val) {
  btn.bind('click',val);
});
jQuery('#navigation .delete-tab').remove();

Это назначит каждому обработчику кликов, который исходная кнопка имеет для элемента .tab-del-btn, функциональность должна быть эквивалентна коду, который вы разместили в последующем ответе.

Answer 3

Попробуйте это:

var navTabs = $("#navigation .delete-tab:first");

$(".tab-del-btn","#navigation li.selected").click(function() {
    navTabs.click();
});

Я сократил код и для вас.