無法在從jQuery腳本添加的表單上運行jquery函數

我做了一個腳本，如果用戶沒有登錄，將創建一個登錄表單。我已經使用html（）函數創建了表單（讓我知道如果有更好的選擇）。到目前爲止，這工作正常，表單會在用戶輸入正確的用戶名/密碼後登錄用戶。無法在從jQuery腳本添加的表單上運行jquery函數

我的問題是，我不能然後在這些新添加的表單上運行jquery函數，即使代碼添加後的事實。例如，像

$('#usernamefield').attr('value', 'login');

什麼都不會做。顯然我做錯了什麼，但我不知道是什麼。我在下面提供了相關的代碼（關於提交到服務器的部分已被刪除）。所有這些代碼都會在用戶未登錄時創建表單。然後，我只需要在單擊用戶名錶單時彈出警告，但顯然該部分在此示例中不起作用。

//This will create the login form and will submit data to the server and perform an action based on the results 
var loginForm = function(){ 
    $('.logindiv').html("<!-- Form Code Start --><form id='login' method='post' accept-charset='UTF-8'><input type='hidden' name='submitted' id='submitted' value='1'/><div><span class='error'></span></div><label for='username' >UserName*:</label><input type='text' name='formusername' id='formusername' value='' maxlength='50' /><span id='login_username_errorloc' class='error'></span><label for='password' >Password*:</label><input type='password' name='formpassword' id='formpassword' maxlength='50' /><span id='login_password_errorloc' class='error'></span><input type='submit' name='Submit' value='Submit' /></form>") 
}; 

$(document).ready(function(){ 
    //Check Login and load appropriate apps based on result 
    $.post('./reg_source/check_login.php', function(data) { 
     //If the user is logged in then this section will run. Ugh double negatives! 
     if (data !== "false") { 
      getUserData(data); 
      $('.logindiv').html("Welcome back, "+dbdata[4]+"! <br> <a href='reg_source/logout.php'>Logout</a> | <a href='profile.php'>Profile</a>"); 
     } 
     //If the user is NOT logged in then this will run 
     else if (data === "false") 
     { 
      loginForm(); 
      $('.registerdiv').html("<a href = 'register.php'>Register Here</a>"); 
     } 
    }); 

    $('#formusername').click(function(){ 
     alert("You clicked me!"); 
    }); 

});

來源

2013-07-31 Braden Jageman

爲您的代碼創建一個小提琴。 –

您需要使用事件代表團，因爲formusername元素動態

$(document).on('click', '#formusername', function(){ 
    alert("You clicked me!"); 
});

來源

2013-07-31 06:25:24

我將來一定會使用該方法，但我只是使用click - > alert作爲示例。還有其他一些我不能做的事情，比如向事先創建的div添加新文本。 –

事件代表團使用增加了動態添加元素而你的情況ID form

$('.logindiv').on('click','#formusername',function(){ 
    alert("You clicked me!"); 
});

代表到最近的靜態父母，你的情況是.logindiv。

來源

2013-07-31 06:26:52 bipen

你爲什麼不能有登錄表單的HTML和隱藏它

$('.logindiv').show(); or $('.logindiv').hide();

根據你的條件

來源

2013-07-31 06:28:52 Netwidz

是的！我意識到這是我的問題的一部分。我沒有嘗試.on（）建議，但是你的解決方案明確地解決了我的問題，並且是我從現在開始應該做的方法。謝謝！ –

不客氣......我很樂意幫忙 – Netwidz

動態添加事件，你應該使用.on()綁定點擊功能

$('.logindiv').on('click','#formusername', function(){ 
     alert("You clicked me!"); 
    });

更好替代將保持形式隱藏在內。

來源

2013-07-31 06:29:17 anil

由於事件在綁定到dom之前綁定，所以應該使用jQuery .live（）或.on（）。

.live（）已棄用，因此您應該使用.on（）。

您可以在$（文檔）上執行.on（），但需要花費很多時間遍歷dom中的該元素。

所以，

$('.logindiv').on('click','#formusername',function(){ 
    alert("Here comes the alert pop up"); 
});

來源

2013-07-31 06:34:13

我認爲阿倫P佐尼的答案可能是最優雅的解決方案。無論如何，如果你不想使用委託，你也可以在loginForm（）中添加點擊事件，或者在data ===「false」檢查中調用它。

這裏的重點在於您添加的單擊事件'ondomready'，而formusername是ajax調用（因此是異步）的結果。換句話說，formusername目前還不存在，所以你的代碼找不到它。您必須確保在創建表單後添加事件。

來源

2013-07-31 06:51:17 Stratboy

無法在從jQuery腳本添加的表單上運行jquery函數

回答

相關問題