當我使用模板時，Javascript函數不起作用

我有一個JavaScript代碼的html文件。當我使用模板時，Javascript函數不起作用

<div id="star_rating"> 
    <a id="one">&#9734;</a><a id="two">&#9734;</a><a id="three">&#9734;</a> 
</div> 
<script type="text/javascript"> 
$(document).on("ready", function() { 
    $("#one").hover(
     function() { 
      markHover("true", "false", "false", "false", "false"); 
     },function() { 
      markHover("false", "false", "false", "false", "false"); 
     }    
    ); 
    $("#two").hover(
     function() { 
      markHover("true", "false", "false", "false", "false"); 
     },function() { 
      markHover("false", "false", "false", "false", "false"); 
     }    
    ); 
});

那麼這個工程。現在我使用一個jQuery模板系統。在index.html中包含腳本標籤。在包含.on("pagebefore")事件的其他文件中，我包含了三個a標記。問題是.hover函數不起作用。當我將.hover代碼粘貼到我的控制檯時，它可以正常工作。

這裏jsFiddle

謝謝指教！

來源

2013-08-07 Michael Unterthurner

我怕我不明白什麼是行不通的。星星如預期般出現。你還期望發生什麼？ –

@ClaudioRedi當我在其他文件中分割js和html時，它不起作用。 –

我猜你在DOM中的元素存在之前綁定了事件。嘗試使用事件委派。 – zzzzBov

這可能是因爲該元素是動態

$(document).on('mouseenter','#one',function() { 
    markHover("true", "false", "false", "false", "false"); 
}).on('mouseleave', '#one', function() { 
    markHover("false", "false", "false", "false", "false"); 
}); 
$(document).on('mouseenter','#two',function() { 
    markHover("true", "true", "false", "false", "false"); 
}).on('mouseleave', '#two', function() { 
    markHover("false", "false", "false", "false", "false"); 
});

創建你可以把它簡化爲

var params = { 
    'one': ["true", "false", "false", "false", "false"], 
    'two': ["true", "true", "false", "false", "false"], 
    'three': ["true", "true", "true", "false", "false"], 
    'four': ["true", "true", "true", "true", "false"], 
    'five': ["true", "true", "true", "true", "true"], 
} 

$(document).on('mouseenter','#one, #two, #three, #four, #five',function() { 
    markHover.apply(window, params[this.id]); 
}).on('mouseleave', '#one, #two, #three, #four, #five', function() { 
    markHover("false", "false", "false", "false", "false"); 
});

演示：Fiddle

來源

2013-08-07 13:03:17

我會測試它:) –

這是一個着名的答案:)真的很重要:)謝謝你，我已經從這3小時工作..但現在：D真的很感謝你:) –

@MichaelUnterthurner更正 –

太多的代碼，不知道爲什麼它不是」 t與您的模板工作，但試試這個：

jQuery ：

$(".rate").hover(
     function() { 
      var thisone = parseInt($(this).data('star')); 
      $(".rate").each(function(){ 
       if(parseInt($(this).data('star')) <= thisone) 
       { 
        $(this).html("&#9733;"); 
       } 
      }); 
     }, 
     function() { 
      $(".rate").each(function(){ 
       $(this).html("&#9734;"); 
      }); 
     }    
    );

HTML：

<div> 
    <a class="rate" id="one" data-star="1">&#9734;</a> 
    <a class="rate" id="two" data-star="2">&#9734;</a> 
    <a class="rate" id="three" data-star="3">&#9734;</a> 
    <a class="rate" id="four" data-star="4">&#9734;</a> 
    <a class="rate" id="five" data-star="5">&#9734;</a> 
</div>

小提琴演示：http://jsfiddle.net/calder12/uXPt9/3/

來源

2013-08-07 13:16:53

不錯解決方法：D做得好:)但要遲到了...... –

哈，這就是生活，很高興你把它分類！ –

當我使用模板時，Javascript函數不起作用

回答

相關問題