Как передать аргумент из динамически созданной кнопки? - PullRequest
Новая
       67

Как передать аргумент из динамически созданной кнопки?

1 голос
/ 27 апреля 2020

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

Например, у вас есть несколько постов: post1, post2, post3. Вы нажимаете на кнопку поста 1, и тогда у вас есть только пост2 и пост3.

Мне удалось добавить кнопку, но я не могу понять, как я ie событие onclick этой кнопки с указанием c <div> Я хочу это скрыть. Моя логика c говорит, что мне нужно передать аргумент кнопке, которая сообщит привязанной к ней функции, что «я хочу пропустить». Но я не могу понять, как передать аргумент этой функции.

У меня есть следующая структура DOM: 

<div id="post1">
    <table>
        <tr>
            <td>some text1</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post2">
    <table>
        <tr>
            <td>some text2</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post3">
    <table>
        <tr>
            <td>some text3</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

<div id="post4">
    <table>
        <tr>
            <td>some text4</td>
            <td>some more text</td>
        </tr>
    </table>
</div>

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

function hidePost(postId){
    jQuery('#'+postId).hide();
}

Вот как я добавляю столбцы и кнопки: 

function addColumn(){
    jQuery("div").each(function (index){
        let currentPostId = (jQuery(this).attr("id"));        

        let colomnRow = document.createElement('td');                
        let clearButton = document.createElement('button')

        clearButton.text = "Clear Button";
        clearButton.onclick = hidePost(currentPostId) //Here is my problem. I don't know how to pass an argument to onclick method.


        colomnRow.appendChild(clearButton);   

        jQuery(this).find("tr").each(function(){            
            jQuery(this).find('td').eq(1).after(colomnRow.outerHTML)
        })
    });
}

Только это не Работа. Когда я пытаюсь передать аргумент onclick таким образом, он просто выполняет функцию при назначении. Я пробовал разные подходы, такие как передача строки clearButton.onclick ='hidePost(\"+postId+\");' Я также пытался зарегистрировать обратный вызов, используя jquery, например, так: 

let clearButton = document.createElement('button')
jQuery(clearButton).click(function(){
    jQuery('#'+postId).hide();
})

Но это тоже не сработало.

I Следует отметить, что я делаю это в сценарии Tampermonkey. Так что, возможно, проблема есть. Кроме того, я считаю разумным сказать, что я очень плохо знаком с javascript и jquery и пользовательскими сценариями в целом. Так что я совершенно уверен, что в этом примере я делаю несколько вещей, которые ошибочны. Если у вас есть лучший подход для достижения того, чего я пытаюсь достичь, я весь в ушах.

1 Ответ

1 голос
/ 27 апреля 2020

Основная проблема в вашей логике c заключается в том, что вы немедленно вызываете hidePost() и присваиваете его возвращаемое значение, которое не определено, в качестве обработчика событий для кнопки. Вместо этого вам нужно обернуть его в анонимную функцию, чтобы она выполнялась только после , когда нажата кнопка: 

clearButton.onclick = function() { hidePost(currentPostId); }

Кроме того, отсутствует свойство text объекта Element. Вместо этого это должно быть textContent.

Однако стоит отметить, что ваша логика c намного сложнее, чем должна быть. Если вы используете один делегированный обработчик событий для всех элементов button, все, что вам нужно сделать, - это пройти через DOM, чтобы найти ближайшего родителя tr и скрыть его. Нет необходимости задействовать id элементов вообще. Попробуйте это: 

(function($) {
  $('div').on('click', '.clear', function() {
    $(this).closest('div').hide();
  });

  $("div tr").append('<td><button class="clear">Clear</button></td>');
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="post1">
  <table>
    <tr>
      <td>some text1</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post2">
  <table>
    <tr>
      <td>some text2</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post3">
  <table>
    <tr>
      <td>some text3</td>
      <td>some more text</td>
    </tr>
  </table>
</div>
<div id="post4">
  <table>
    <tr>
      <td>some text4</td>
      <td>some more text</td>
    </tr>
  </table>
</div>

Обратите внимание на использование IIFE для создания локальной области видимости использования переменной $ для ссылки на jQuery как обычно, без вмешательства в код в остальной части страницы.

...