2016-10-22 2 views
0

Что такое разный синтаксис, пожалуйста, объясните в деталях?Что может быть между этими синтаксисами, пожалуйста, объясните в деталях?

$(document).on("click", "#index1", function() { 
    $(p).hide(); 
}); 
$("#index2").on("click", "#index1", function() { 
    $(p).hide(); 
}); 
$("#index1").on("click", function() { 
    $(p).hide(); 
}); 
+4

См. Http://api.jquery.com/on/ – undefined

+0

^все это объясняется там, очень подробно. – adeneo

+0

Стек не является учебным или учебным сайтом. Это где-то, к чему вы пришли, чтобы обратиться за помощью к проблеме с кодом, с которым вы работаете, и это выглядит для меня как правильный синтаксис кода. Кроме того, поскольку вы не указали на то, что IMHO не квалифицируется как вопрос, то вам решать, как читать и учиться в руководствах, что-то попробовать, а если что-то не работает, вернитесь и отправьте (реальный) вопрос. –

ответ

2

В первом случае вы добавляете щелчок слушателя «документ», но это будет выполняться только при нажатии кнопки на «# INDEX1». Во втором - вы добавляете слушателя к «index2», и он будет выполнен, только если вы нажмете на «# index1», расположенный внутри «# index2». В третьем случае вы просто добавляете слушателя в «index1»

+0

thankyou ... кстати я был смущен во втором. теперь ясно –

0

Давайте сначала представим веб-страницу.

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <button id='index1'>click me</button> 
    </body> 
    </html> 
  1. Это будет работать

    <!DOCTYPE html> 
    <html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
        <button id='index1'>click me</button> 
        <script type="text/javascript"> 
         $("#index1").on("click", function() { 
          $(p).hide(); 
         }); 
        </script> 
    </body> 
    </html> 
    
  2. Это не будет работать, потому что элемент не существует, а сценарий был выполнен.

    <!DOCTYPE html> 
    <html> 
    <head> 
        <title></title> 
    </head> 
    <body> 
        <script type="text/javascript"> 
         $("#index1").on("click", function() { 
          $(p).hide(); 
         }); 
        </script> 
        <button id='index1'>click me</button> 
    </body> 
    </html> 
    

Но работа вокруг него будет

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      $(document).on("click", "#index1", function() { 
       $(p).hide(); 
      }); 
     </script> 
     <button id='index1'>click me</button> 
    </body> 
    </html> 

Это говорит всякий раз, когда событие щелчка увольняют по проверке документов, если щелчок был обстрелян #index1 элемента. Таким образом, если элемент не существует, обратный вызов прикрепляется к узлу документа. Теперь, когда в документе будет запущен щелчок, он проверяет, возникла ли она от #index1