Базовый обход селектора Jquery

#jquery #html

#jquery #HTML

Вопрос:

Я пытаюсь отправить форму после нажатия на div ‘tweet’. Достаточно просто, но я не могу заставить его работать. При нажатии ничего не происходит. Не думайте, что я перехожу к правильному селектору. Приведенный ниже пример html содержит много экземпляров «tweet», но все с разными «значениями», которые я хочу отправить через post

HTML

 <div id="tweet">
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-1">
                <form id="posticon" method="POST" action="">
                <input type="hidden" name="srch_term" id="srch_term" value="John">
                </form>
            </div>
        </div>  
    </div>
</div>

jquery

 $(document).ready(function(){
    $(document).on('click', '#tweet', function(){
    $(this).children("#posticon").submit();
    });
});

1. Идентификаторы должны быть уникальными

2. Предупреждение о преступлении: ID дубликаты.

3. Как и куда вы хотите отправить форму, не предпринимая никаких действий? Как уже указывали Андреас и Правин, у вас также не может быть много tweet экземпляров с одинаковым идентификатором

Ответ №1:

Во-первых, вы можете использовать один id раз на странице, поэтому .tweet вместо этого используйте класс.

Во-вторых, .children() метод jQuery используется для получения прямых дочерних элементов (т. Е. Он не глубже одного уровня), поэтому используйте .find() вместо этого, который глубже одного уровня.

 $(document).ready(function() {

  $(".tweet").click(function() {
    $(this).find(".posticon").submit();
  });

  //to check if the form was successfully submitted
  $(".posticon").submit(function() {
    var inputValue = $(this).children("input").val();
    alert(inputValue   "'s form was submitted");
  });

});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tweet">
  John's Tweet
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-1">
        <form class="posticon" method="POST" action="">
          <input type="hidden" name="srch_term" id="srch_term" value="John">
        </form>
      </div>
    </div>
  </div>
</div>

<div class="tweet">
  Michael's Tweet
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-1">
        <form class="posticon" method="POST" action="">
          <input type="hidden" name="srch_term" id="srch_term" value="Michael">
        </form>
      </div>
    </div>
  </div>
</div>

Больше информации .children() на .find() веб-сайте jQuery.

1. Спасибо за отличную информацию.. Я знаю, что все идентификаторы также должны быть уникальными. Считайте это мозговым пердежом. Извините. Я не знал о дочерних элементах / найти разницу. Спасибо

Ответ №2:

Попробуйте это:

 $(document).ready(function(){
 $(document).on('click', '#tweet', function(){
 $("#posticon").trigger("submit");
 });
});