jQuery 이벤트 핸들러는 Firefox에서만 작동합니다.

저는 Rail Baron이라는 보드 게임을위한 간단한 웹 기반 조회 유틸리티를 만들고 있습니다. jQuery autoComplete에 연결되는 두 개의 텍스트 입력이 있는데, 이는 잘 작동하는 것으로 보입니다. 입력 내용의 변경 이벤트에는 두 도시 간의 여행에 대한 보수를 나타내는 달러 금액이 표시됩니다.jQuery 이벤트 핸들러는 Firefox에서만 작동합니다.

change() 이벤트 핸들러는 Firefox에서는 호출되지만 다른 브라우저에서는 호출되지 않습니다. Internet Explorer에서 작동하지 않아서 이것이 웹킷 문제라고 생각하지 않습니다. 해결 방법을 찾고 있거나 왜 이런 일이 일어나고 있는지 이해하십시오. http://paislee.net/railbaron에서 전체 응용 프로그램을 사용할 수 있습니다. 감사! <head>에로드

종속성 :

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

관련 태그 :

<form id="payoffForm" action="#"> 
       <fieldset> 
        <legend> 
         <strong>Payoff Lookup</strong> 
        </legend> 
        <label for="from">From:</label> 
        <input id="from" type="text"> 
        <label for="to">To:</label> 
        <input id="to" type="text"> 
        <div id="result">$</div> 
       </fieldset>    
      </form>

내 자바 스크립트로드 단지 </body> 태그 닫기 전에 : 사용할 수

<script type="text/javascript"> 
      var chart; // small csv file in memory 

      // this updates the dollar amount displayed 
      function updatePayoff() { 

       var result; 
       var from = $("#from").val(); 
       var to = $("#to").val(); 

       var from_i = chart[0].indexOf(from); 
       var to_i = chart[0].indexOf(to); 
       result = chart[to_i + 1][from_i] * 1000; 

       $("#result").html(result ? "$" + result : "$"); 

      } 

      // attach event handlers 
      $("#from").change(function() { 
       updatePayoff(); 
      }); 

      $("#to").change(function() { 
       updatePayoff(); 
      }); 

      // entry point 
      $(document).ready(function() { 
       $.ajax({ 
        url : "./payoffs.csv", 
        cache : false, 
        success : function(result) { 
         chart = CSVToArray(result); 
         $("#from").autocomplete({ 
          source : chart[0] 
         }); 
         $("#to").autocomplete({ 
          source : chart[0] 
         }); 
        } 
       }); 
      }); 

      // parsing my csv file into autocomplete array 
      function CSVToArray(strData, strDelimiter) { 
       // ..implementation.. 
      } 

</script>

전체 응용 프로그램에서을 http://paislee.net/railbaron. 감사!

출처

2011-12-28 paislee

클릭 이벤트는 어디입니까?! –

콘솔에 스크립트 오류가 표시되지 않는다고 추가 할 수 있습니다. – paislee

@Sudhir 내 나쁜 변화에(). – paislee

의 최신 버전입니다. jQuery UI 자동 완성의 select 콜백을 살펴보십시오. 이것은 완전히 테스트되지 않았지만 시도해보십시오.

 /* REMOVE 
     $("#from").change(function() { 
      updatePayoff(); 
     }); 

     $("#to").change(function() { 
      updatePayoff(); 
     }); 
     */ 

     $(document).ready(function() { 
      $.ajax({ 
       url : "./payoffs.csv", 
       cache : false, 
       success : function(result) { 
        chart = CSVToArray(result); 
        $("#from").autocomplete({ 
         source : chart[0], 
         select: function() { 
          updatePayoff(); 
         } 
        }); 
        $("#to").autocomplete({ 
         source : chart[0], 
         select: function() { 
          updatePayoff(); 
         } 
        }); 
       } 
      }); 
     });

출처

2011-12-28 04:15:48

이 문제가 해결되었습니다. 아직도 change()가 실패한 이유를 이해하려고 노력하고 있습니다. 어떤 아이디어? – paislee

내 생각에 대부분의 브라우저는 텍스트 필드에서 "change"이벤트를 인식하지 못합니다. 개인적인 경험을 통해 '변경'은 일반적으로 텍스트 필드가 아닌 드롭 다운, 라디오 및 체크 박스에 사용됩니다. –

input 태그가 닫혀 있지 않은 것 같습니다. 를 폐쇄하려고하고 그것은 또한 당신의 스크립트 태그처럼 보이는

<input id="to" type="text" />

몸의 외부 사물

가 해결되는지 확인 -

<input id="to" type="text">

나는이 약간 (? 모든)적인 doctypes에 대한 잘못된 생각 나는 그것이 유효하다고 생각하지 않는다. 신체의 끝으로 이동해보십시오.

출처

2011-12-28 04:08:59

나는 앱에 대한 링크를주었습니다. 여기 모든 태그를 게시하는 것이 좋습니다. – paislee

아니요 - 링크가 괜찮습니다 - 죄송합니다 .... 지금보고 있습니다 –

@paislee - 내 편집을 참조하십시오 –

이것은 dom을 조정하고 클릭/변경 핸들러를 사용할 때의 문제점과 매우 유사합니다. 나를 위해 .on()functionality이 문제를 해결했습니다. FYI, .on()은 .live()

출처

2011-12-28 04:10:15 bpeterson76

jQuery 이벤트 핸들러는 Firefox에서만 작동합니다.

답변

관련 문제