Изменение ввода, созданного jQuery - PullRequest
Новая
       2

Изменение ввода, созданного jQuery

1 голос
/ 02 ноября 2019

Я хотел бы создать html-объекты с помощью jQuery, а затем снова удалить их с помощью jQuery / javascript, но я столкнулся с проблемами, потому что эти объекты не существовали на момент загрузки страницы. У вас есть идеи, как мне решить эту проблему? Заранее спасибо.

(Это мой первый пост на stackoverflow - надеюсь, я все сделал правильно ^^)

https://jsbin.com/yudamofoho/edit

HTML 

<body>
  <div id='ipt-list'>
  </div>
  <input type="submit" id="btn-add" value="Add">
</body>

Javascript 

function rmInput(){
  $(this).parent().remove();
    return false;
}
$(function(){
  $('#btn-add').on('click', function(){
        ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput();" class="btn-rm" value="Remove"></div>';
        $('#ipt-list').append(ipt);
        return false;
  });
});

Ответы [ 3 ]

2 голосов
/ 02 ноября 2019

Проблема в том, что вы используете устаревший атрибут onclick. В вызываемой ею функции this будет ссылаться на window, а не на элемент, вызвавший событие.

Чтобы исправить это и улучшить свою логику, удалите встроенный обработчик событий и используйте вместо него делегированный. : 

jQuery(function($) {
  $('#btn-add').on('click', function() {
    let ipt = '<div><input type="text" value=""><input type="button" class="btn-rm" value="Remove"></div>';
    $('#ipt-list').append(ipt);
  });

  $('#ipt-list').on('click', '.btn-rm', function() {
    $(this).parent().remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ipt-list"></div>
<input type="button" id="btn-add" value="Add">

Также обратите внимание, что я изменил обе кнопки на type="button". Если вы собираетесь отменить событие в обоих случаях, тип submit становится избыточным.

2 голосов
/ 02 ноября 2019

this относится к объекту Window, а не к элементу, о котором вы думаете.

Вы должны передать this в функцию, чтобы вы могли ссылаться на нее внутри функции: 

onclick="rmInput(this);"


function rmInput(el){
  //console.log(this.constructor.name); // Window
  $(el).parent().remove();
  return false;
}

$(function(){
  $('#btn-add').on('click', function(){
    ipt = '<div><input type="text" value=""><input type="submit" onclick="rmInput(this);" class="btn-rm" value="Remove"></div>';
    $('#ipt-list').append(ipt);
    return false;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='ipt-list'>
</div>
<input type="submit" id="btn-add" value="Add">
0 голосов
/ 02 ноября 2019

Поскольку вы используете jQuery, вам не нужно помещать встроенное событие onclick. 

$(function(){
  $('#btn-add').on('click', function(){
		ipt = '<div><input type="text" value=""><input type="submit" class="btn-rm" value="Remove"></div>';
		$('#ipt-list').append(ipt);
		return false;
  });
  
  $('#ipt-list').on('click', '.btn-rm', function(){
		$(this).parent().remove();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div id='ipt-list'>
  </div>
  <input type="submit" id="btn-add" value="Add">
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...