JQuery работает только в том случае, если это единственный элемент на странице

Question

У меня есть группа полей ввода внутри формы, которая должна отображаться только при нажатии кнопки. Если это только поля ввода, сам скрипт jquery на странице (включен в индексный файл, содержащий только дизайн и элемент head), он отлично работает. Но когда он находится внутри формы, содержащей другие элементы формы (текст, флажок и т. Д.) И сценарий AJAX, он не работает.

Вот сценарий:

<script> 
    $(document).ready(function() { 
     $('.show').click(function() { 
      $(this).next('div').slideToggle(); 
     }); 
    }); 
</script> 

И элемент DIV (у меня есть пятнадцать, но я думал, что 3 будет достаточно)

<tr><td class="cimek"><input type="text" name="1ros1"></td></tr> 
<tr><td class="elem"><input type="text" name="1rossi1">Ft</td></tr> 
<tr><td class="elem"><a href="#" class="show">Új</a></td></tr> 
<div class="ujDiv"> 
    <tr><td class="cimek"><input type="text" name="1ros2"></td></tr> 
    <tr><td class="elem"><input type="text" name="1rossi2">Ft</td></tr> 
    <tr><td class="elem"><a href="#" class="show">Új</a></td></tr> 

    <div class="ujDiv"> 
     <tr><td class="cimek"><input type="text" name="1ros3"></td></tr> 
     <tr><td class="elem"><input type="text" name="1rossi3">Ft</td></tr> 
     <tr><td class="elem"><a href="#" class="show">Új</a></td></tr> 

     <div class="ujDiv"> 
      <tr><td class="cimek"><input type="text" name="1ros4"></td></tr> 
      <tr><td class="elem"><input type="text" name="1rossi4">Ft</td></tr> 
      <tr><td class="elem"><a href="#" class="show">Új</a></td></tr> 
     </div> 
    </div> 
</div> 

Я также поставил display:none; на .ujDiv классе, потому что это было единственный способ, которым я мог скрыть это, когда он впервые загружается.

Итак, любые идеи, как я могу скрыть их, когда в файле есть другие элементы формы?

Answer 1

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

 $(document).ready(function() { 
 
      $('.show').click(function() { 
 
       $(this).parents().eq(3).next('div').slideToggle(); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ujDiv"> 
 
     <table> 
 
      <tr> 
 
       <td class="cimek"><input type="text" name="1ros1"></td> 
 
       <td class="elem"><input type="text" name="1rossi1">1</td> 
 
       <td class="elem"><a href="#" class="show">2</a></td> 
 
      </tr> 
 
     </table> 
 
     <div class="ujDiv"> 
 
      <table> 
 
       <tr> 
 
        <td class="cimek"><input type="text" name="1ros2"></td> 
 
        <td class="elem"><input type="text" name="1rossi2">3</td> 
 
        <td class="elem"><a href="#" class="show">4</a></td> 
 
       </tr> 
 
      </table> 
 
      <div class="ujDiv"> 
 
       <table> 
 
       <tr> 
 
        <td class="cimek"><input type="text" name="1ros3"></td> 
 
        <td class="elem"><input type="text" name="1rossi3">5</td> 
 
        <td class="elem"><a href="#" class="show">6</a></td> 
 
       </tr> 
 
       </table> 
 
      <div class="ujDiv"> 
 
       <table> 
 
        <tr> 
 
         <td class="cimek"><input type="text" name="1ros4"></td> 
 
         <td class="elem"><input type="text" name="1rossi4">7</td> 
 
         <td class="elem"><a href="#" class="show">8</a></td> 
 
        </tr> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div>