Базовый переход селектора JQuery

Question

Я пытаюсь отправить форму после того, как был нажат div 'tweet'. Достаточно просто, но я не могу заставить его работать. Ничего не происходит при нажатии. Не думайте, что я перехожу к правильному селектору. HTML ниже пример имеет много 'ЧИРИКНУТЬ' экземпляры, но все с разными "ценности", что я хочу, чтобы отправить по почте

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(); 
    }); 
}); 

Answer 1

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

Во-вторых, метод .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.

Answer 2

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

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