양식 입력 jQuery를 미리 봅니다.

Question

양식에 내 이름과 단계 요소를 미리 보려고 했으므로 사용자가 실수를했는지 확인할 수 있습니다. 이름을 그냥 작동하지 않습니다 그러나 단계를 미리 볼 수 있어요. 왜 누군가는 볼 수 있습니까? 당신이 단지 그것을 발견 한 첫 번째 요소를 선택합니다 할 경우

http://jsfiddle.net/pocockn/rw54b/

$(document).ready(function() { 
    var commentNode = $('#lp-step'), 
     nameNode = $('#lp-name'), 
     name = $('#name'); 



    $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',function() { 



     commentNode.text($('#step_1').val()); 
     commentNode.html($('#lp-step').html().replace(/\n/g,'<br />')); 

    if($('#name').val()) { 
     nameNode.text(name.val() + ' says:'); 

    } 
    else { 
     return false; 
    } 


    }); 
}); 

Answer 1

당신은 같은 ID 두 요소를 가질 수 없습니다. (이 경우 div는 항상 비어 있으며 if 문을 실행하지 않습니다.) div에 id=name과 input이 있습니다. 그래서 div id를 nameDiv으로 변경했습니다.

Id's should be unique to avoid confusion.

<div id="nameDiv"> 
    <label for="name">Enter recipe name:</label> 
    <input type="text" id="name" name="name"> 
    <br /> 
</div> 

http://jsfiddle.net/trevordowdle/rw54b/1/