Добавить onClick с параметром самостоятельного ввода объекта jQuery?

#javascript #jquery #parameter-passing

#javascript #jquery #передача параметров

Вопрос:

Желаемый результат в HTML:

 <input onclick="someFunction(this)"/>

Попытка:

 var input = $("<input/>");
input.attr("onclick", "someFunction(this)");
$("#body").append(input)

Результат:

 <input onclick="[object Object]"/>

Я пытался использовать:

 input.click({param: "this"}, someFunction);

Я также попытался заменить «это» на «ввод». Не повезло.

jQuery не является обязательным требованием, однако мне нужно, чтобы это делалось динамически. Приведенное выше — всего лишь пример, у фактического объекта больше атрибутов.

1. Читать документы: api.jquery.com/click

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

3. Вы можете перенаправить цель события на вызов функции, используя лямбда-выражение: input.on('click', e => someFunction(e.target)) Почему так важно, отображаете ли вы атрибут или создаете прослушиватель в памяти?

Ответ №1:

Все работает из коробки…

Вот пример. Просто нажмите на input

 var input = $("<input/>");
input.attr("onclick", "someFunction(this)");
$("#body").append(input);

function someFunction(obj) {
  $('#result').css('color', 'red');
  console.log(obj);
}

$('#result').text(input[0].outerHTML);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body id="body">
  <div>This is your code:</div>
  <div id="result"></div>
</body>

И вы также можете использовать чистый jQuery. Это то $(this) , что вам нужно.

 var input = $("<input id="xxx"/>");
input.click(function() {
  const theInput = $(this);
  console.log(theInput[0]);
});
$("#body").append(input);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body id="body"></body>

Ответ №2:

Вы могли бы создать прослушиватель в памяти вместо добавления обработчика в качестве атрибута. Эта версия позволяет обернуть цель вашего события в объект jQuery перед вызовом функции.

 const someFunction = ($element) => {
  console.log($element.prop('class'));
}

const $input = $('<input>', { class: 'foo' })
  .on('click', (e) => someFunction($(e.target)))
  .appendTo('body');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Но если вам действительно нужно добавить его в качестве атрибута, вы можете сделать следующее.

 const someFunction = (element) => {
  console.log($(element).prop('class'));
}

const $input = $('<input>', { class: 'foo' })
  .attr('onclick', 'someFunction(this)')
  .appendTo('body');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ответ №3:

Используйте функцию со стрелкой, this будет унаследована.

input.on('click', () => someFunction(this))

1. Имейте в виду, что лямбда-выражение не переопределяет this , так что у вас все хорошо, но если бы вы использовали input.on('click', function() { someFunction(this) }) , у вас возникла бы проблема с областью видимости.

2. Ofc, да. В этом слава функций со стрелками.

3. В вашем примере this не будет ввода, может быть, вы хотели: input.on('click', () => someFunction(input)) ?