Используйте jquery для обработки привязки onClick()

У меня есть набор динамически генерируемых тегов привязки в цикле for следующим образом:

<div id = "solTitle"> <a href = "#"  id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>';

Как только этот код будет выполнен, выход html для одного из файлов будет выглядеть так:

<div id = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div id = "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>

Теперь я хочу, чтобы разные тексты отображались при нажатии на указанные ссылки. openSolution() выглядит так:

function openSolution() {
    alert('here');
    $('#solTitle a').click(function(evt) {
        evt.preventDefault();
        alert('here in');
        var divId = 'summary' + $(this).attr('id');

        document.getElementById(divId).className = '';

    });
}

Когда я выполняю его и нажимаю на любую из ссылок, поток не входит в обработчик jquery click. Я проверил его с помощью вышеупомянутых предупреждений. Он отображает только предупреждение - "здесь", а не предупреждение - "здесь". При повторном нажатии ссылки все работает отлично с правильным значением divId.

Ответы

Ответ 1

При первом нажатии ссылки выполняется openSolution. Эта функция связывает обработчик события click с ссылкой, но не выполняет его. Во второй раз, когда вы нажмете ссылку, будет выполнен обработчик события click.

То, что вы делаете, похоже, как бы поражает точку использования jQuery в первую очередь. Почему бы просто не привязать событие click к элементам в первую очередь:

$(document).ready(function() {
    $("#solTitle a").click(function() {
        //Do stuff when clicked
    });
});

Таким образом вам не нужны атрибуты onClick для ваших элементов.

Также похоже, что у вас есть несколько элементов с тем же значением id ( "solTitle" ), что неверно. Вам нужно будет найти другую общую характеристику (class обычно является хорошим вариантом). Если вы измените все вхождения id="solTitle" на class="solTitle", вы можете использовать селектор классов:

$(".solTitle a")

Поскольку повторяющиеся значения id недопустимы, код не будет работать, как ожидалось, при обращении к нескольким копиям одного и того же id. Что имеет место, так это то, что первое вхождение элемента с этим id используется, а все остальные игнорируются.

Ответ 2

Позволяет взять якорный тег с событием onclick, которое вызывает функцию Javascript.

<a href="#" onClick="showDiv(1);">1</a>

Теперь в javascript напишите ниже код

function showDiv(pageid)
{
   alert(pageid);
}

Это покажет вам предупреждение "1"....

Ответ 3

HTML должен выглядеть так:

<div class="solTitle"> <a href="#"  id="solution0">Solution0 </a></div>
<div class="solTitle"> <a href="#"  id="solution1">Solution1 </a></div>

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div>
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div>

И javascript:

$(document).ready(function(){
    $(".solTitle a").live('click',function(e){
        var contentId = "summary_" + $(this).attr('id');
        $(".summary").hide();
        $("#" + contentId).show();
    });
});

См. пример: http://jsfiddle.net/kmendes/4G9UF/

Ответ 4

<div class = "solTitle"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br>

<div class= "solTitle"> <a href = "#"  id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br>



$(document).ready(function(){
    $('.solTitle a').click(function(e) {
        e.preventDefault();
        alert('here in');
         var divId = 'summary' +$(this).attr('id');

        document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */

    });
 });

Я изменил несколько вещей:

  • удалить onclick attr и связать событие click внутри document.ready
  • изменено имя solTitle как идентификатор к CLASS: id can not repeat

Ответ 5

У вас не может быть много раз один и тот же идентификатор для элементов. Он должен быть уникальным.

Используйте класс и сделайте уникальные идентификаторы:

<div class="solTitle" id="solTitle1"> <a href = "#"  id = "solution0" onClick = "openSolution();">Solution0 </a></div>

И используйте селектор классов:

$('.solTitle a').click(function(evt) {

    evt.preventDefault();
    alert('here in');
    var divId = 'summary' + this.id.substring(0, this.id.length-1);

    document.getElementById(divId).className = ''; 

});

Ответ 6

Вы назначаете событие onclick внутри функции. Это означает, что после выполнения функции один раз, второй элемент onclick также присваивается элементу.

Либо назначьте функцию onclick, либо используйте jquery click().

Нет необходимости иметь обе