onclick을 사용하는 대신 이벤트 바인딩하기

나는 어디에서나 함수를 가지고 onclick을 갖기보다는 이벤트를 요소에 바인딩하는 것이 더 좋다는 말을 들었습니다. 나는 더 깨끗하고 쉬운 코드 디버깅을 의미하는 HTML로부터 더 많은 것을 양도함에 따라 이것에 동의한다.onclick을 사용하는 대신 이벤트 바인딩하기

하지만이 작업을 수행하는 데 문제가 있습니다. PHP (아래 참조)를 사용하여 일부 데이터를 순환시키고 현재 onclick을 사용하여 함수를 호출합니다. 이 onclick 이벤트를 JQuery를 사용하여 여러 요소에 바인딩하려면 어떻게해야합니까? 어떤 도움

출처

2010-06-13 Abs

JavaScript가 꺼져있을 때 폴백 솔루션을 제공해야한다고 생각합니다. 'href = "#"'는 아무 것도 이끌지 않습니다. –

@Marcel - JS가없는 사용자가 내 사이트를 방문하는 것을 원하지 않습니다. 약간 잔인하지만이 앱의 성격 때문에 그렇게해야합니다. – Abs

<ul id="container"> 
<?php foreach($main_tags as $key=>$value){ ?> 
<li> 
    <a href="#" key="<?php echo $key;?>"> 
    <?php echo $key; ?> 
     <span class="num-active"> 
      <?php echo $value; ?> 
     </span> 
    </a> 
</li> 
<?php } ?> 
</div> 
<script> 
$(function() { 

function tag_search(){}; 

$('#container a').click(function(e) { 
e.preventDefault(); 
tag_search.call(this, $(this).attr('key')); 
}); 

}); 
</script>

출처

2010-06-13 20:19:24

아하이 봐요! 루프 내에서 뭔가를하는 데 집중하고 있었지만 JS 코드도 복제 될까봐 두려워했습니다. 하지만 난 그냥 넓은 선택기를 사용할 수 있습니다! Meder에게 감사드립니다! :) – Abs

더 나은 XHTML 표준에 맞게 만들려면'key-key' 속성을'data-key'로 변경 한 다음 해당 JS를'$ (this) .attr ('key')'에서'$ (this) .attr ('data-key')'를 사용하십시오. –

@Matt - Godamn, 누군가가 조만간 언급 할 것이라는 것을 알고있었습니다. 그래도 같은 개념으로 이름을 붙일 수 있습니다. –

당신은 iterate over a group of divs or lis or whatever with JQuery을 수에 대한

<?php foreach($main_tags as $key=>$value){ ?> 
<li> 
    <a id="<?php echo $key; ?>" href="#" onclick="tag_search('<?php echo $key; ?>'); return false;"> 
    <?php echo $key; ?> 
     <span class="num-active"> 
      <?php echo $value; ?> 
     </span> 
    </a> 
</li> 
<?php } ?>

모두 감사합니다.

아래 코드는 PHP를 표시하지 않으며 JQery의 상황을 알려주는 경고를 사용합니다 ... 실제 코드가 될 것이라고 의견을 말했습니다 .... 도움이 되길 바랍니다. 이와 같이 항목의 순서가 중요하기 때문에 ID에 대해 걱정할 필요가 없습니다. 물론 당신의 ID를 떠날 수

편집 - 처리 사용자 정의 키

사례 1 방법을 추가 :. 숫자 키

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Binding events</title> 
     <script type="text/javascript" src="JQUERY-PATH/jquery-1.4.2.min.js"></script> 
     <meta charset="utf-8" /> 
     <script type="text/javascript"> 
         // When the page is ready ================================================== 
      $(document).ready(function() 
      { 
       $('li').each(function(index) 
       { 
        // The line below would read something like: 
        // $(this).click(function() {tag_search(index)}); 
        $(this).click(function() { alert("This would trigger => tag_search(" + index + ")")});      
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     The php goes into the unordered list: 
     <ul> 
      <li>zero</li> 
      <li>one</li> 
      <li>two</li> 
      <li>three</li> 
      <li>four</li> 
      <li>five</li> 
     </ul> 
    </body> 
</html>

사례 2 : 당신의 선택의 사용자 정의 키

숫자가 모두있는 키가있는 경우 임의의 문자를 앞에 붙여서 ID 또는 클래스 이름의 유효성을 검사 할 수 있습니다.

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Binding events</title> 
     <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
     <meta charset="utf-8" /> 
     <script type="text/javascript"> 
      // When the page is ready ================================================== 
      $(document).ready(function() 
      { 
       $('li').each(function(index) 
       { 
        // The line below would read something like: 
        // $(this).click(function() {tag_search($(this).attr('id'))}); 
        $(this).click(function() { alert("This would trigger => tag_search(" + $(this).attr('id') + ")")});      
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     The php goes into the unordered list: 
     The custom keys are placed in ids or classes: 
     <ul> 
      <li id="Roger">zero</li> 
      <li id="Dodger">one</li> 
      <li id="23884">two</li> 
      <li id="Fubar">three</li> 
      <li id="Gungho">four</li> 
      <li id="Burlap">five</li> 
     </ul> 
    </body> 
</html>

출처

2010-06-13 20:29:14

이것은 흥미로운 방법입니다. 따라서 PHP는 약간의 작업을 수행하고 JQuery는 일부 작업을 수행 할 책임이 있습니다. 페이지로드가 약간 더 빠름을 의미합니까? 이것은 Meder 's 코드가하는 것과 유사합니까? – Abs

그래서 'key'가 무엇인지 물어 보았습니다. 단지 '0,1,2'또는 맞춤 키인지 확실하지 않았습니다. –

@Meder - 키가 증분이 아니며 해당 태그에 고유 한 ID입니다. 그것은 123, 34, 456이 될 수 있습니다. Btw, 나는'key '가 무엇인지에 대한 의견을 보지 못했습니다. – Abs

onclick을 사용하는 대신 이벤트 바인딩하기

답변

관련 문제