Событие триггера щелчка при щелчке другого элемента в цикле

Question

У меня есть требование, когда я должен запускать событие click на заголовке таблицы при щелчке другого заголовка таблицы (две разные таблицы), но триггер не запускается в таблице, когда в петля. Хотя, если я жестко привязываю триггер к отдельному элементу, он работает.

В настоящее время JS выглядит как что-то вроде этого:

var outsideHeaders = $("#header th"); 
var tableHeaders = $(".dataTable th"); 

for(var cnt = 0; cnt< outsideHeaders.length; cnt++) 
{ 
    $(outsideHeaders[cnt]).bind('click',function(){ 
     $(tableHeaders[cnt]).trigger('click'); 
    }); 
} 

Просьба предоставить решение для этого!

Обновлено:
Это как мой код выглядит в настоящее время:

var outsideHeaders = $("#header th"); 
var tableHeaders = $(".dataTable th"); 

for(var cnt = 0; cnt< outsideHeaders.length; cnt++) 
{ 
    (function(headerCnt){ 
     $(outsideHeaders[headerCnt]).bind('click',function(){ 
      $(tableHeaders[headerCnt]).trigger('click'); 
    }); 
    })(cnt); 
} 

Answer 1

Значение cnt внутри функции обработчика события щелчка будет равен его последнее значение в цикле for (в данном случае, независимо header.length было, когда код выполняется) из-за способом определения объема в работах JavaScript. Вы должны использовать замыкание, так что она сохраняет свое значение для этой конкретной итерации:

$(document).ready(function() { 
    var outsideHeaders = $("#header th"); 
    var tableHeaders = $(".dataTable th"); 

    for(var cnt = 0; cnt < outsideHeaders.length; cnt++) 
    { 
     (function(headerCount) { 
      $(outsideHeaders[headerCount]).bind('click',function(){ 
       $(tableHeaders[headerCount]).trigger('click'); 
      }); 
     })(cnt); 
    } 
}); 

Обратите внимание, что я обернутый код в $(document).ready() вызова. Это гарантирует, что эти элементы существуют, когда вы попытаетесь их выбрать.

Answer 2

Нет необходимости в создании итерации. Я думаю, это может быть правильный путь здесь:

outsideHeaders.on("click", function() { 
    var cnt = outsideHeaders.index(this); 
    tableHeaders.eq(cnt).trigger("click"); 
}); 

Вы просто связать click событие для всех outsideHeaders и вызвать click событие соответствующего элемента tableHeaders на основе индекса.

Answer 3

var $outsideHeaders = $("#header th"), 
    $tableHeaders = $(".dataTable th"); 

$outsideHeaders.on('click', function(){ 
    var i = $outsideHeaders.index(this); 
    $tableHeaders.eq(i).trigger('click'); 
});