2

テキストフィールドがフォーカスされているとき、ぼやけているとき、およびキーが押されたときに、いくつかの関数を呼び出そうとしています。ただし、フォーカス機能のみが機能します。これが私が持っているものです：

HTML：

<form id="loginForm" method="post" action="login.php" style="float: right; width: 90%; margin: 0 -1px 5px 0;">
    <input type="text" id="loginPass" value="password" /><input type="text" id="loginName" value="email" />
    <input type="submit" id="loginSubmit" value="Log In" />
</form>

JS：

$('#loginPass').keypress(function() {
    alert('hey');
});
$('#loginPass').blur(function() {
    var lp = $('#loginPass');
    alert('val:'+lp.val());
});
$('#loginPass').focus(function() {
    var lp = $('#loginPass');
    if ( lp.val() == 'password' ) {
        $('#loginForm').html('\n        <input type="password" id="loginPass" value="" />' +
            '<input type="text" id="loginName" value="email" />' +
            '<input type="submit" id="loginSubmit" value="Log In" />');
        //setTimeout(function() { lp.focus(); }, 10);
        setCaretPos(document.getElementById("loginPass"), 0);
    }
});

私が言ったように、フォーカス1つは期待どおりに機能しますが、他のフォーカスからアラートを受け取ることさえできません。問題が何であるかについて何か考えはありますか？

4

4 に答える 4

6

あなたが必要ですevent delegation：

$('#loginForm').on('keypress', '#loginPass', function() {
   alert('hey');
});
$('#loginForm').on('blur', '#loginPass', function() {
  var lp = $('#loginPass');
  alert('val:'+lp.val());
});

でもfocusすべきhas to get the delegationです：

$('#loginForm').on('focus', '#loginPass', function() {
var lp = $('#loginPass');
if ( lp.val() == 'password' ) {
    $('#loginForm').html('\n        <input type="password" id="loginPass" value="" />' +
        '<input type="text" id="loginName" value="email" />' +
        '<input type="submit" id="loginSubmit" value="Log In" />');
    //setTimeout(function() { lp.focus(); }, 10);
    setCaretPos(document.getElementById("loginPass"), 0);
}
});

because every time you focus the input it replaces the current html markup with the new one.

于 2013-02-21T07:17:41.457 に答える
2

コードは問題ありません。イベントを委任するための省略形です。これが.keypressのコードです。問題は、彼らが呼び出されていなかったため、リスナーが委任されたことです。

$(document).ready(function(){
    $('#loginPass').keypress(function() {
        alert('hey');
    });
    $('#loginPass').blur(function() {
        var lp = $('#loginPass');
        //alert('val:'+lp.val());
    });
});

私はあなたのコードでjsfiddleをセットアップしました、それは大丈夫です。リスナーの周りにdocument.readyを投げるだけで、あなたは金色になります。

于 2013-02-21T07:31:54.403 に答える
0

これは、要素がDOMにロードされる前にイベントをバインドしようとしている可能性があります。全体を次のようにラップしてみてください。

$(function(){
  //events go here
});
于 2013-02-21T07:27:37.333 に答える
0

あなたはjavascriptについてのいくつかの基本的なことを理解する必要があります。通常、javascriptエンジンはdom要素を検出し、ページが読み込まれているときにのみ、それぞれのイベントハドラーをそれらにアタッチします。後で（javascriptの読み取り後またはページのロード後に）dom要素を追加すると、javascriptエンジンは動的に追加されたdomに対してスクリプトを実行しません。回避するには、JavaScriptエンジンにスクリプトを再度読み取るように強制する必要があります。

function shouldApplyDynamicDOM(){
$('#loginPass').keypress(function() {
    alert('hey');
});
$('#loginPass').blur(function() {
    var lp = $('#loginPass');
    alert('val:'+lp.val());
});
}

shouldApplyDynamicDOM();//Attach event handler on page load.

$('#loginPass').focus(function() {
    var lp = $('#loginPass');
    if ( lp.val() == 'password' ) {
       //These DOM will be added dynamically. 
        $('#loginForm').html('\n        <input type="password" id="loginPass" value="" />' +
            '<input type="text" id="loginName" value="email" />' +
            '<input type="submit" id="loginSubmit" value="Log In" />');
        //setTimeout(function() { lp.focus(); }, 10);
        shouldApplyDynamicDOM(); //Here Forcing to add event handler for dynamic added DOM
        setCaretPos(document.getElementById("loginPass"), 0);
    }
});

注：このコードはテストされていません。構文エラーがあればすみません。

于 2013-02-21T07:39:36.137 に答える