페이지 바보와 내가 id 요소

Question

나는 모든 것이 잘 작동하는 페이지가 보여,하지만 한 가지 문제가 표시되는에 숨겨진 요소를 설정 한 후, 내 페이지가 갑자기 바보이다 후 상단으로 이동합니다. 이전에 숨겨진 요소가 표시되지만 페이지를 멍청하게 만들지는 않습니다. 여기

은 페이지입니다 : 당신이 제 3 입력 영역에 무엇을 추가하고 상단까지 페이지 바보를 "카테고리를 추가"링크를 클릭 http://www.problemio.com/add_problem.php

. 아래로 스크롤하면 이전에 숨겨진 텍스트 상자가 표시되는 것을 볼 수 있지만 페이지를 갑자기 움직이지 않게하려면 어떻게해야합니까? . 여기

내 jQuery 코드입니다 :

$ ('#의 add_category') (클릭 기능() { // 경고 ("추가 카테고리에서"); // 이제 값을 얻을 수있다 텍스트 입력 영역 VAR 카테고리 = $ ("#의 category_field") 발은();. // 작동

 var text_area = $("#log").val();   
    //alert ("text_area: " + text_area); 

    // Should append to value of textarea what is in the category 
    if (text_area) 
    { 
     //alert ("text area NOT EMPTY: " + text_area + " and category: " + category); 
     text_area = text_area + " , " + category;  
    } 
    else 
    { 
     //alert ("text area EMPTY: " + text_area + " and category: " + category); 
     text_area = category;   
    }  

    // Now replace old text_area with new one 
    $("#log").val(text_area); 

    // Now reset the text field 
    $("#category_field").val(""); 

    // Make the categories box visible 
    document.getElementById("categories_box").style.display = 'block'; 

});

document.getElementById("categories_box").style.display = 'block'; 

감사 : 문제는이 같은 요소를 표시하려고 jQuery를, 마지막 줄입니다하고있다

  <form id="create_problem" name="form" method="post"> 
       <p> 
       <label for="problem_name">Problem Name: </label><input type="text" value="<?php echo $problem_name;?>" size="75" name="problem_name" id="problem_name"></input> 
       </p> 
       <p> 
       Explain the problem: 
       </p> 

     <textarea id="content" name="content" class="tinymce" style="width: 500px; height: 350px;"> 
     </textarea> 
     </p> 

    <p class="ui-widget"> 
     <label for="category_field">Category: </label> 
     <input id="category_field" size="25"/> <a id="add_category" href="#">Add Category</a> 
    </p> 

    <p id="categories_box" class="ui-widget" style="margin-top:2em; font-family:Arial; display: none;"> 
     Categories:<br /> 
     <textarea id="log" style="height: 150px; width: 500px;" ></textarea> 
    </p> 

     <span class="error" id="categories_error" style="display:none">Categories Can Not Be Empty</span> 
     <span class="success" id="categories_success" style="display:none">Categories Added Successfully!</span>  

       <input type="hidden" id="question_html" name="question_html" /> 

       <!-- Check if the person is logged in --> 
<!-- 
       <p> 
        <input class="problem_follow_checkbox" TYPE="checkbox" NAME="follow_problem" /> Follow this problem   
       </p> 
--> 



<span class="error" style="display:none"> Please Enter Valid Data</span> 
<span class="success" style="display:none"> Problem Added Successfully!</span> 

     <input type="submit" class="button" value="Add Problem"></input> 

<form> 

특히 라인 : 여기

및

는 HTML 양식입니다 !! !!

Answer 1

당신은 반환 false로해야합니다;

$('#add_category').click(function() { 
    var text_area = $("#log").val();   
    //alert ("text_area: " + text_area); 

    // Should append to value of textarea what is in the category 
    if (text_area) 
    { 
     //alert ("text area NOT EMPTY: " + text_area + " and category: " + category); 
     text_area = text_area + " , " + category;  
    } 
    else 
    { 
     //alert ("text area EMPTY: " + text_area + " and category: " + category); 
     text_area = category;   
    }  

    // Now replace old text_area with new one 
    $("#log").val(text_area); 

    // Now reset the text field 
    $("#category_field").val(""); 

    // Make the categories box visible 
    document.getElementById("categories_box").style.display = 'block'; 

return false; 
}); 

가 false를 반환하지 그쪽 마지막 줄에 페이지의 상단에 #을 생성;

Answer 2

링크의 끝에 파운드 (.. 따라서이 페이지의 상단으로 이동합니다 존재하지 않는 레이블 앵커)을 가지고 있기 때문입니다. 두 가지 가능한 옵션은 해당 레이블로 이동 (그리고 추가 된 때문에 범주 상자)하도록 앵커로 새로운 카테고리 상자 레이블을 추가하거나, 아니면 '아무튼 그래서 onclick 이벤트의 끝에서 false를 반환 할 수 있습니다 t 레지스터.