2017-03-13 23 views
0

這是我的代碼:JQuery的不工作的第一次點擊,但工作後

function getBlock2(EUID, MID, I, ESTS) 
{ 
     $('.new-exam').on('click', function() { 
     $('.new-exam').removeClass('new-exam'); 
     $(this).addClass('new-exam-hover'); 
     $('.tab-item-hover').addClass('tab-item'); 
     $('.tab-item').removeClass('tab-item-hover'); 
     }); 
     $('.tab-item').on('click', function() { 
     $('.new-exam-hover').addClass('new-exam'); 
     $('.new-exam').removeClass('new-exam-hover'); 
     $('.tab-item-hover').removeClass('tab-item-hover'); 
     $(this).addClass('tab-item-hover');  
     }); 

     $.ajax({ 
     type: "POST", 
     url: './exam/x/exams_ajax.exe.php', 
     data: { EUID : EUID, MID : MID, I : I, ESTS : ESTS }, 
     cache: false, 
     success: function(data) { 
     $('.block2').html(data); 
     } 

    }); return false; 
} 

在第一次點擊,ajax的部分作品,但刪除/ addClass一個沒有,直到我再次點擊。

我似乎無法弄清楚爲什麼,任何幫助將不勝感激。謝謝。

+0

這是裹在文件中。準備? – guradio

+0

如何調用函數getBlock2(EUID,MID,I,ESTS)? 點擊事件? 取出''(''。'new-exam')。on('click',function(){'這部分功能不可用,它會起作用 –

+0

你能提供一個jsfiddle或代碼片段 –

回答

0

我建議按照其他人的建議添加document.ready,然後檢查您是否按照以下順序進行操作。

  1. 首先包括jQuery庫
  2. 包括已經getBlock2函數定義
  3. 包括被調用getBlock2功能

最佳做法是js文件,總是在指你的js文件的js文件頁面結束。

0

你需要你的JavaScript移動到文檔正文的結束或附上document.ready

$('.new-exam').on('click', function() { 
    $('.new-exam').removeClass('new-exam'); 
    $(this).addClass('new-exam-hover'); 
    $('.tab-item-hover').addClass('tab-item'); 
    $('.tab-item').removeClass('tab-item-hover'); 
    }); 
    $('.tab-item') 

內jQuery代碼。如果這就是所謂的裝載身體之前,你的頁面不會有任何new-examtab-item的事情呢。

+0

當我嘗試將它包含在document.ready塊中時,我得到一個錯誤「getBlock2未定義。」也許我做錯了什麼,我對javascript不熟練。 –

+0

您必須有一些其他代碼在它存在之前調用getBlock2。在JavaScript中理解時序需要一些工作,但要開始,總是將* all * your JavaScript放入'document.ready'中 – Tashi

0

我設法解決了這個問題。

我在加載JQuery庫之前加載函數,這就是爲什麼當我試圖將它加入到document.ready塊中時出現錯誤。

我已經改變了順序,只是將下一部分移動到document.ready區塊,現在它工作正常!

$('.new-exam').on('click', function() { 
    $('.new-exam').removeClass('new-exam'); 
    $(this).addClass('new-exam-hover'); 
    $('.tab-item-hover').addClass('tab-item'); 
    $('.tab-item').removeClass('tab-item-hover'); 
    }); 
    $('.tab-item').on('click', function() { 
    $('.new-exam-hover').addClass('new-exam'); 
    $('.new-exam').removeClass('new-exam-hover'); 
    $('.tab-item-hover').removeClass('tab-item-hover'); 
    $(this).addClass('tab-item-hover');  
    }); 

感謝您的幫助。