4

Здравствуйте! Есть код:

<tr name="<?=$arr[$i]['index']?>" onclick="location.href='SMSManager1.php?do=full&index=<?=$i?>'">
    <td><?=$arr[$i]['index']?></td>
    <td><?=$arr[$i]['source']?></td>
    <td><?=$arr[$i]['destination']?></td>
    <td><?=date('d.m.Y H:i:s', $timeToSend)?></td>
    <td><button type="button" class="btn btn-danger btn-xs active" onclick="StopSend(<?=$arr[$i]['index']?>, 1); event.cancelBubble=true;">Stop</button>
    <button type="button" class="btn btn-primary btn-xs active" data-toggle="modal" data-target="#main-modal" onclick="EditSend(this.getAttribute('data-source'), <?= $arr[$i]['index'] ?>); event.cancelBubble=true;" data-source='<?= json_encode($arr, JSON_HEX_QUOT); ?>'>Edit</button>
    <?
    if($arr[$i]['status'] == 1)
    {
    ?>
        <button type="button" class="btn btn-warning btn-xs active" onclick="PauseSend(<?=$arr[$i]['index']?>, 2); event.cancelBubble=true;">Pause</button></td>
    <?
    }
    else if($arr[$i]['status'] == 2)
    {
    ?>
        <button type="button" class="btn btn-success btn-xs active" onclick="PauseSend(<?=$arr[$i]['index']?>, 1); event.cancelBubble=true;">Start</button></td>
    <?
    }
    ?>
</tr>

при нажатии на одну из кнопок вызывается onclick по строке в таблице. для решения данной проблемы использовал event.cancelBubble=true;. Для кнопок 'Start', 'Pause', 'Stop' все прекрасно работает и onclick родителя не срабатывает, а вот для кнопки 'EditSend' срабатывает onclick родительского элемента.

При нажатии на кнопку 'Edit' выскакивает модальное окно. кнопка передает php массив в js функцию, которая обрабатывает его и заносит данные из массива в <input>ы модального окна(так должно быть). но получается что при нажатии на кнопку выскакивает модальное окно и страница сразу обновляется, т.к. срабатывает обработчик родительского элемента...

пробовал сделать передачу массива через jquery

var EditBtn = document.getElementById("EditBtn");
EditBtn.addEventListener("click", function(e){
$.ajax({
type: "POST",
url: "functions.php",
data: {'function':'edit', 'index':ind},
success: function(f)
{
    alert(f);
    e.stopPropagation();
    //EditSend2(f);
}
});
e.stopPropagation();
});

безрезультатно

7
  • cancelBubble - Use Event.stopPropagation() instead of this non-standard method.
    – Grundy
    1 дек 2016 в 8:22
  • видимых отличий в приведенном куске кода нет, поэтому нельзя сказать почему одни кнопки работают а другие нет
    – Grundy
    1 дек 2016 в 8:24
  • @Grundy, <button type="button" id="EditBtn" class="btn btn-primary btn-xs active" data-toggle="modal" data-target="#main-modal" onclick="EditSend(this.getAttribute('data-source'), <?= $partInfo[$i]['index'] ?>); event.stopPropagation();" data-source='<?= json_encode($arr, JSON_HEX_QUOT); ?>'>Edit</button> not respond 1 дек 2016 в 9:25
  • что должен показывать этот комментарий? Перенеси все необходимое в вопрос.
    – Grundy
    1 дек 2016 в 9:34
  • @Grundy, дополнил вопрос 1 дек 2016 в 9:40

1 ответ 1

0

вариант: event.cancelBubble=true; оказался рабочим,

вариант:

var EditBtn = document.getElementById("EditBtn");
    var arr = EditBtn.getAttribute('data-source');
    EditBtn.addEventListener("click", function(e){
    e.stopPropagation();
    });

тоже рабочий, но оба варианта не для моего случая, т.к. они обрывают все выполнения события после текущего. а у меня идет клик, а затем еще событие вывода модального окна, нашел выход немного колхозный но рабочий. Создал флаг по наведению курсора на кнопки.

<tr name="tables" id="<?=$partInfo[$i]['index']?>" 
        onclick="tblClick(<?=$partInfo[$i]['index']?>);">

    $(document).ready(function()
    {
       $('button').mouseover(function(){flag = false});
       $('button').mouseout(function(){flag = true});
    });

    function tblClick(index)
    {
       if(flag) location.href='SMSManager1.php?do=full&index='+index;
    }

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.