JavaScript改變屬性只適用於第一次點擊

我試圖通過使用jquery隱藏/顯示窗體的其他部分的每個窗體的問題。第一個下一個點擊功能用於更改標識，但第二個不會註冊。我知道我必須失去一些明顯的東西。謝謝。JavaScript改變屬性只適用於第一次點擊

jQuery(document).ready(function ($) { 
     $("#prev").hide() 
     $("#item-vfb-42").hide() 
     $("#item-vfb-43").hide() 
     $("#item-vfb-31").hide() 
     $("#item-vfb-44").hide() 
     $("#item-vfb-45").hide() 
     $("#item-vfb-46").hide() 
     $("#item-vfb-47").hide() 
    $("#next").click(function() { 
     $("#next").prop("id", "next1"); 
     $("#prev").show() 
     $("#item-vfb-30").hide() 
     $("#item-vfb-42").show() 
    }); 
    $("#next1").click(function() { 
     $("#next1").prop("id", "next2"); 
     $("#item-vfb-42").hide() 
     $("#item-vfb-43").show() 
    }); 
    $("#next2").click(function() { 
     $("#next2").attr("id", "next3"); 
     $("#item-vfb-43").hide() 
     $("#item-vfb-31").show() 
    }); 
    $("#next3").click(function() { 
     $("#next3").attr("id", "next4"); 
     $("#item-vfb-31").hide() 
     $("#item-vfb-44").show() 
    }); 
    $("#next4").click(function() { 
     $("#next4").attr("id", "next5"); 
     $("#item-vfb-44").hide() 
     $("#item-vfb-45").show() 
    }); 
    $("#next5").click(function() { 
     $("#next5").attr("id", "next6"); 
     $("#item-vfb-45").hide() 
     $("#item-vfb-46").show() 
    }); 
    $("#next6").click(function() { 
     $("#prev6").hide() 
     $("#next6").attr("id", "next7"); 
     $("#item-vfb-46").hide() 
     $("#item-vfb-47").show() 
    }); 
    $("#prev").click(function() { 
     $("#next1").attr("id", "next"); 
     $("#prev").hide() 
     $("#item-vfb-30").show() 
     $("#item-vfb-42").hide() 
    });    
});

來源

2014-01-29 tonyarash

爲什麼有這麼多您的通話不以分號結束？ –

更改ID不會更改其事件 – Satpal

您正在動態更改ID並將單擊事件綁定到綁定時從未存在的ID。你可以將它綁定到一個類並改變你的方法，而不是增加這麼多的事件處理程序。作爲一個快速修復使用事件委託，同時綁定事件將工作 – PSL

你應該爲例改變：

$("#next6").click(function() { 
//some code 
});

到

$("#next6").on("click",(function() { 
//some code 
});

來源

2014-01-29 19:48:48 mmcorrelo

的問題是，所有的點擊功能正在註冊頁面加載時。在頁面加載時，只有#next存在，所以您的其他功能都不起作用。我會通過使用data-屬性修復此問題，並在單擊按鈕時檢查此屬性。

比方說，你的按鈕看起來是這樣的：

<button id="#next" data-step="0">Next</button>

然後，你可以做這樣的事情：

$('#next').click(function() { 
    var step = $(this).attr('data-step'); 

    if(step == 0) 
    { 
     //do stuff for inital click 
     $(this).attr('data-step', 1); //set attribute to next step 
    } 

    if(step == 1) 
    { 
     //do stuff for next step... 
     //etc etc... 
    } 
});

來源

2014-01-29 19:50:59

好吧，我會試試這個。我知道我的第一種方法並不是最好的。我是這個初學者。 – tonyarash

這是行得通的。謝謝。 – tonyarash

不客氣。 –

的問題是，當你試圖攻擊點擊結合$('#next1')尚不存在。

你可以嘗試做這樣的：

$("#next").click(function(){ 
    $("#next").prop("id", "next1"); 
    $("#prev").show(); 
    $("#item-vfb-30").hide() ; 
    $("#item-vfb-42").show(); 
    $("#next1").click(function(){ 
     // continue nesting your click bindings so they don't get called until the element exists. 
    }); 
});

來源

2014-01-29 19:52:20

所以基本上.click只能在任何給定的元素上註冊一次。 – tonyarash

不完全。只是當你調用$（「＃next1」）時，頁面上沒有一個ID爲「next1」的元素，因爲用戶還沒有點擊下一個按鈕。所以jquery說：「好吧，讓我們把這個函數附加到'＃next1'。」「哦，沒有'＃next1'，所以我們不要做任何事情。」 –

可能會讓你感到困惑的是，在你編寫'''$（「＃next」）後，你正在編寫'''$（'＃next1'，function（）...'''。prop（「id 「，」next1「）;'''但是這不是它們被執行的順序，因爲直到點擊後才發生ID更改。我的方式允許您在發生點擊之前不進行綁定。 –

JavaScript改變屬性只適用於第一次點擊

回答

相關問題