English 中文(简体)
jj 查询删除/隐藏元素
原标题:jQuery remove/hide element
  • 时间:2012-05-24 19:08:18
  •  标签:
  • jquery
  • html

我有一个选择标签, 当它的价值改变时, 我想根据这个新值从数据库中获得一些数据, 然后把这些新数据放到一个新的 div 上, 这个 div 包含一个接近的标记, 当用户点击它时, 新的 div 会隐藏, 我做了,除了隐藏新的 div, 一切正常, 除了隐藏新的 div, 我的关闭新 div 的j Query 是好的, 但现在, 我不认为我在jQuery 中做错了, 但我不知道哪里是我的错误, 会帮助我,

jQuery code

$(document).ready(function(){
$("#aqIoQuesSelector").on("change",function(){
        var IO = $("#aqIoQuesSelector").val();
        $("#aqSugInfo").html( <div class="closeSign1"></div> );
        $.getJSON("http://localhost/Mar7ba/InformationObject/giveContenfForIO/"+IO+"/TRUE",function(data){
            if(data.length>0){
                $("#aqSugInfo").css("text-align","right");
                for(var i=0;i<data.length;i++){
                    $("#aqSugInfo").append( <p><span class="aqoneContenSug"> +data[i]+ </span></p> );
                }
            }else{
                $("#aqSugInfo").append( <span class="successMessage">no suggesiont</span> );
            }
            $("#aqSugInfo").css("display","block");
        }); 
    });
});

$(document).ready(function(){
    $( .closeSign1 ).on( click , function() {
        $(this).parent().hide();
    });
});

$html 代码 #

<div id="addQuestion1" class="container">
    <ul>
        <li>
            <label class="Paragraph">Question</label>
            <p>
                <label>Text</label>
                <input id="aqQuestionText"type="text" class="longInput1"/>
            </p>
            <p>
                <label>Answer</label>
                <input id="aqQuestionAnswer"type="text" class="longInput1"/>
            </p>
            <p>
                <label>Is Existed ?</label>
                <input type="button" value="check" class="button1" id="aqQuestionSug"/>
            </p>
            <div id="aqSugQues" class="SuggestionsContainer">
                <div class="closeSign1"></div>
            </div>
        </li>
        <li>
            <p><label class="Paragraph">Choices</label></p>
            <p>
                <label>First Choice</label>
                <input type="text" class="longInput1" name="choice1"/>
            </p>
            <p>
                <label>Second Choice</label>
                <input type="text" class="longInput1" name="choice2"/>
            </p>
            <p>
                <label>Third Choice</label>
                <input type="text" class="longInput1" name="choice3"/>
            </p>
        </li>
        <li id="aqQuestionIoli">
            <label class="Paragraph">Question IO</label>
            <p>
                <label>Concept</label>
                <select class="ConceptSelector1"></select>
            </p>
            <p>
                <label>IO</label>
                <select id="aqIoQuesSelector"></select>
            </p>
            <p>
                <label>Info</label>
                <input type="text" class="longInput1"/>
            </p>
            <div id="aqSugInfo" class="SuggestionsContainer">
                <div class="closeSign1"></div>
            </div>
        </li>
        <li id="aqAnswerIoli">
            <label class="Paragraph">Answer IO</label>
            <p>
                <label>Concept</label>
                <select class="ConceptSelector1"></select>
            </p>
            <p>
                <label>IO</label>
                <select id="aqIoAnswerSelector"></select>
            </p>
        </li>
        <li>
            <label class="Paragraph">Hints</label>
            <p>
                <label>First Hint</label>
                <input type="text" class="longInput1"/>
            </p>
            <p>
                <label>Second Hint</label>
                <input type="text" class="longInput1"/>
            </p>
            <div id="aqSugHints" class="SuggestionsContainer">
                <div class="closeSign1"></div>
            </div>
        </li>
        <li>
            <label>Type</label>
            <select class="TypeSelector"></select>
        </li>
        <li>
            <input type="submit" value="save" class="button1"/>
        </li>
    </ul>
</div>

notice that the sign close is used three time here , it works for the first time at the div aqSugQues , but doesn t work at the div aqSugInfo nor the div aqSugHints

Ajax 工作良好,我打印结果

thanks for helping
最佳回答

此行 :

$("#aqSugInfo").html( <div class="closeSign1"></div> );

正在用一个新的按钮替换 div 的内容, 该按钮没有单击活动的约束, 所以每次更新时, 该按钮将失去它的绑定 。

您可以尝试将动态内容包在可以轻松删除的容器中,或者做类似的事情

$("#aqSugInfo").children( :not(.closeSign1) ).remove();
问题回答

如果您想要隐藏 $(“#aqSugInfo”) , 为什么不在代码中这么说? $(“#aqSugInfo”). hide (); ?





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签