Question

好的所以我正在做一个jquery项目，对于网站我需要添加一个编辑，但是当你＆＃34;登录＆＃34;时需要通过jquery添加一个删除按钮。使用xml文档存储用户名并传递word和jquery以检查它是否有效一个问题是我添加按钮后它们不起作用或获取id或拉出预期的模块plz help

pannel 1

<div class='rows panel-place'>
    <div class='col-xs-12 col-md-4'>
         <div class='panel panel-primary'>
                    <div class='panel-heading'>
                        <div class='panel-title' id='panel1head'></div>
                    </div>
                    <div class='panel-body'>
                        <ul id='panel1body'>

                        </ul>
                    </div>
                    <div class='panel-footer' id='panel1footer'>
                        <button id='add1' class='btn' data-toggle="modal" data-target="#addamod1">Add Announcement</button>
                        <button id='link1' class='btn' data-toggle="modal" data-target="#addlmod1">Add link</button>
                    </div>
                </div>
     </div>

添加按钮

$('#p1adda').click(function(){

                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var input=$('#p1anounce').val();
                var date=$('#p1date').val();
                var node=$('<li></li>').text(input+" "+date).attr("id","p1"+m);
                $('#panel1body').prepend(node)
                $('#panel1body').children().first().prepend(edit)
                $('#panel1body').children().first().prepend(remove)
                m++;

            });//end of announce p1 click

这只是一些代码，我也可以通过将其放入{}

来缩短attr部分

bc我是新手，我不知道这里发布的是我的整个代码在ul之前是jquery和bootstrap链接，但它不会让我显示它也是第一个面板的开头看起来像其他两个也有两个更多添加链接面板看起来像第一个但差异的<？ / p>

                        </ul>
                    </div>
                    <div class='panel-footer' id='panel1footer'>
                        <button id='add1' class='btn' data-toggle="modal" data-target="#addamod1">Add Announcement</button>
                        <button id='link1' class='btn' data-toggle="modal" data-target="#addlmod1">Add link</button>
                    </div>
                </div>
     </div>
     <!--panel 2-->

     <div class='col-xs-12 col-md-4'>
         <div class='panel panel-primary'>
                    <div class='panel-heading'>
                        <div class='panel-title' id='panel2head'></div>
                    </div>
                    <div class='panel-body'>
                        <ul id='panel2body'>

                        </ul>
                    </div>
                    <div class='panel-footer' id='panel2footer'>
                        <button id='add2' class='btn' data-toggle="modal" data-target="#addamod2">Add Announcement</button>
                        <button id='link2' class='btn' data-toggle="modal" data-target="#addlmod2">Add link</button>
                    </div>
                </div>
     </div>
     <!--panel 3-->
     <div class='col-xs-12 col-md-4'>
         <div class='panel panel-primary'>
                    <div class='panel-heading'>
                        <div class='panel-title' id='panel3head'></div>
                    </div>
                    <div class='panel-body'>
                        <ul id='panel3body'>

                        </ul>
                    </div>
                    <div class='panel-footer' id='panel3footer'>
                        <button id='add3' class='btn' data-toggle="modal" data-target="#addamod3">Add Announcement</button>
                        <button id='link3' class='btn' data-toggle="modal" data-target="#addlmod3">Add link</button>
                    </div>
                </div>
     </div>
     </div>
</body>
<!--panel end-->
<body class='bg'>

    <div class='container' style='margin-top:70px'>
        <nav class='navbar navbar-inverse navbar-fixed-top'>
          <div class='container'>
            <div class='navbar-header'>
                <div class='navbar-brand'><img src='Images/cfire.png' class='img img-responsive logo' style='float:left' /> &nbsp Camp Shoobs</div>
                <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#mainNav'>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                    <span class='icon-bar'></span>
                </button>
            </div>
            <div class='collapse navbar-collapse' id='mainNav'>
                <ul class='nav navbar-nav'>
                    <li class='active'><a href='#'>Home</a></li>
                    <li><a href='#'>Activities</a></li>
                    <li><a href='#'>Sign Up</a></li>
                </ul>
                <ul class='nav navbar-nav navbar-right'>
                    <li> 
                    <form>
                        <div id='logout' class='btn btn-success'>Log out</div>
                        <div id='login' class='btn btn-success'>Login</div>
                        <input type='text' id='user' placeholder='username' />
                        <input type='password' id='password' placeholder='password' />
                    </form>
                    </li>
                </ul>
            </div>
           </div>
        </nav>

        </div>

   <!--nav end-->

   <!-- Add Announcement 1 -->
   <div class="modal fade" id="addamod1" tabindex="-1" role="dialog" aria-labelledby="ALabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title modal-primary" id="ALabel1">Add Anouncement</h5>
      </div>
      <form>
      <div class="modal-body">
        <textarea type='textarea' id='p1anounce' rows='5' cols='70' placeholder='Enter Anouncement Here' required='required'></textarea>
        <input type='date' id=p1date required='required'/>
      </div>
      </form>
      <div class="modal-footer">
        <button id='p1adda' class="btn btn-success" class="close" data-dismiss="modal" aria-label="Close" >Add</button>
      </div>
    </div>
  </div>
  </div>

   <!-- Add Announcement 2 -->
   <div class="modal fade" id="addamod2" tabindex="-1" role="dialog" aria-labelledby="ALabel2">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title modal-primary" id="ALabel2">Add Anouncement</h5>
      </div>
      <form>
      <div class="modal-body">
        <textarea type='textarea' id='p2anounce' rows='5' cols='70' placeholder='Enter Anouncement Here' required='required'></textarea>
        <input type='date' id=p2date required='required'/>
      </div>
      </form>
      <div class="modal-footer">
        <button id='p2adda' class="btn btn-success" class="close" data-dismiss="modal" aria-label="Close">Add</button>
      </div>
    </div>
  </div>
  </div>

    <!-- Add Announcement 3 -->
   <div class="modal fade" id="addamod3" tabindex="-1" role="dialog" aria-labelledby="ALabel3">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title modal-primary" id="ALabel3">Add Anouncement</h5>
      </div>
      <form>
      <div class="modal-body">
        <textarea type='textarea' id='p3anounce' rows='5' cols='70' placeholder='Enter Anouncement Here' required='required'></textarea>
        <input type='date' id=p2date required='required'/>
      </div>
      </form>
      <div class="modal-footer">
        <button id='p3adda' class="btn btn-success" class="close" data-dismiss="modal" aria-label="Close">Add</button>
      </div>
    </div>
  </div>
  </div>

    <!-- Add Link 1 -->
   <div class="modal fade" id="addlmod1" tabindex="-1" role="dialog" aria-labelledby="lLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title modal-primary" id="lLabel1">Add Link</h5>
      </div>
      <form>
      <div class="modal-body">
        <input type='text' id='p1text' placeholder='Enter Text You Want Linked Here' required='required'/>
        <input type='text' id='p1link' placeholder='Enter Link' required='required'/>
      </div>
      </form>
      <div class="modal-footer">
        <button id='p1addl' class="btn btn-success" class="close" data-dismiss="modal" aria-label="Close">Add</button>
      </div>
    </div>
  </div>
  </div>



  <!-- Edit text -->

  <div class="modal fade" id="editmod" tabindex="-1" role="dialog" aria-labelledby="lLabel3">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h5 class="modal-title modal-primary" id="lLabel3">Edit text</h5>
      </div>
      <form>
      <div class="modal-body">
        <textarea type='textarea' id='TextBox' rows='5' cols='50' required='required'></textarea>
      </div>
      </form>
      <div class="modal-footer">
        <button id='Editit' class="btn btn-success" class="close" data-dismiss="modal" aria-label="Close" >Edit</button>
      </div>
    </div>
  </div>
  </div>

    <script>

        $(document).ready(function(){

          $('#add1').hide()
          $('#add2').hide()
          $('#add3').hide()

          $('#link1').hide()
          $('#link2').hide()
          $('#link3').hide()
           $.ajax({
            type:'GET',
            url:'PanelInfo.xml',
            Datatype:'xml',
            success: function(result){
                var x=0;
                var y=1;
                $(result).find('panel').each(function(){

                    var title=$(this).find('name').text()
                    //alert(title)
                    var nodes=$('<div></div>').text(title)


                    if(x==0){
                        //alert('in 1')
                        $('#panel1head').append(nodes)
                    }else if(x==1){
                        $('#panel2head').append(nodes)
                        //alert('in 2')
                    }else if(x==2){
                        $('#panel3head').append(nodes)
                        //alert('in 3')
                    }
                    x++;
                    $(result).find('event').each(function() {
                        //alert('why');
                        if(y<=9){
                        //alert('hi')    
                        var event=$(this).text();
                        var enode=$('<li></li>').text(event);
                        //alert('hello');
                        var d=y-3;
                        var e=y-6;
                        if(y<=3){
                            $(enode).attr('id','p1'+y);
                            $('#panel1body').append(enode);
                            //alert('1');
                        }else if(y<=6){
                            $(enode).attr('id','p2'+d);
                            $('#panel2body').append(enode);
                            //alert('2');
                        }else if(y<=9){
                            $(enode).attr('id','p3'+e);
                            $('#panel3body').append(enode);
                            //alert('3');
                        }
                        y++;
                        //alert(event);
                        }
                    });//end each
            });//end each

            }//end result  
           });//end ajax

          //start variables
           $('#logout').hide()
           var x=0;
           var name, username, password;
           var Camper=false;
           var Councilor=false;
           var Supervisor=false;
           var Owner=false;
           var person;
           var user=false;
           var edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit");
           var remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
           var z=1;
           var m=4;
           var n=4;
           var o=4;
            //alert('Remove'+$(remove).attr('id'))
         //end variables

            $('#login').click(function(){
                var login=false;
                x=0;
                $.ajax({
                    type:'GET',
                    url:'users.xml',
                    Datatype:'xml',
                    success: function(result){
                        $(result).find('user').each(function(){




                        if($('#user').val()==$(this).find('username').text()&&$('#password').val()==$(this).find('password').text()){

                            password = $('#password').val();
                            username = $('#user').val();
                            name=$(this).find('name').text();
                            user=true;
                        //alert(user+'hi');
                        }//end if statment
                        });//end each

                        //alert(name);
                                if(name=="Councilor"){
                                    Councilor=true;
                                    //alert("councilor");
                                   for(z=1;z<=$('#panel2body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p2'+z).prepend(edit)
                                       $('#p2'+z).prepend(remove)
                                   }//end p2 for
                                }
                                else if(name=="Camper"){
                                    Camper=true;
                                    //alert("camper");
                                    for(z=1;z<=$('#panel1body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p1'+z).prepend(edit)
                                       $('#p1'+z).prepend(remove)
                                   }//end p2 for
                                }
                                else if(name=="Supervisor"){
                                    Supervisor=true;
                                    //alert("supervisor");
                                   for(z=1;z<=$('#panel2body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p3'+z).prepend(edit)
                                       $('#p3'+z).prepend(remove)
                                   }//end p2 for
                                }
                                else if(name=="Owner"){
                                    Owner=true;
                                    //alert("owner");
                                    //1
                                   for(z=1;z<=$('#panel1body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p1'+z).prepend(edit)
                                       $('#p1'+z).prepend(remove)
                                   }//end p1 for
                                    //2
                                    for(z=1;z<=$('#panel2body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p2'+z).prepend(edit)
                                       $('#p2'+z).prepend(remove)
                                   }//end p2 for
                                    //3
                                   for(z=1;z<=$('#panel3body').children().length;z++){
                                       edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                                       remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                                       $('#p3'+z).prepend(edit)
                                       $('#p3'+z).prepend(remove)
                                   }//end p3 for
                                }

                           if(user==true){
                                login=true;
                                //alert("login");                                    
                                $('#login').hide()
                                $('#user').hide()
                                $('#password').hide()
                                $('#logout').show()
                                $('#logout').text("Logout")
                                var node=$("<div></div>").text("User: "+name).attr('id', 'Person')
                                $('#logout').after(node)

                                if(Camper==true){
                                    $('#add1').show()
                                    $('#link1').show()
                                }else if(Councilor==true){
                                    $('#add2').show()
                                    $('#link2').show()
                                }else if(Supervisor==true){
                                    $('#add3').show()
                                    $('#link3').show()
                                }else if(Owner==true){
                                    $('#add1').show()
                                    $('#add2').show()
                                    $('#add3').show()

                                    $('#link1').show()
                                    $('#link2').show()
                                    $('#link3').show()
                                }
                    }//end user if statment
                    else if(user==false){
                        alert('Invalid Username or Passeord');
                    }//end else
                        }//end success

                });//end ajax
            });//login click

            //if the button id's worked this would be the code i would use for remove
            $('#gone').click(function(){
                    $(this).parent().remove()
            });//end remove click
            //if the buttons id worked for edit this is code i would use
            $('#edit').click(function(){
                    var box=$(this).parent().text()
                    $('#Textbox').val(box)
            });//end edit click


            $('#p1adda').click(function(){

                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var input=$('#p1anounce').val();
                var date=$('#p1date').val();
                var node=$('<li></li>').text(input+" "+date).attr("id","p1"+m);
                $('#panel1body').prepend(node)
                $('#panel1body').children().first().prepend(edit)
                $('#panel1body').children().first().prepend(remove)
                m++;
            });//end of announce p1 click

            $('#p2adda').click(function(){

                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var input=$('#p2anounce').val();
                var date=$('#p2date').val();
                var node=$('<li></li>').text(input+" "+date).attr("id","p2"+n);
                $('#panel2body').prepend(node)
                $('#panel2body').children().first().prepend(edit)
                $('#panel2body').children().first().prepend(remove)
                n++;
            });//end of announce p2 click

            $('#p3adda').click(function(){

                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var input=$('#p3anounce').val();
                var date=$('#p3date').val();
                var node=$('<li></li>').text(input+" "+date).attr("id","p3"+o);
                $('#panel3body').prepend(node)
                $('#panel3body').children().first().prepend(edit)
                $('#panel3body').children().first().prepend(remove)
                o++;
            });//end of announce p3 click 

            $('#p1addl').click(function(){

                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var text=$('#p1text').val();
                var link=$('#p1link').val();
                var node=$('<a><li></li></a>').text(text).attr('href',"https://"+link).attr("id","p1"+m);
                $('#panel1body').prepend(node)
                $('#panel1body').children().first().prepend(edit)
                $('#panel1body').children().first().prepend(remove)
                m++;
            });//end of link p1 click

             $('#p2addl').click(function(){
                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var text=$('#p2text').val();
                var link=$('#p2link').val();
                var node=$('<a><li></li></a>').text(text).attr('href',"https://"+link).attr("id","p2"+n);
                $('#panel2body').prepend(node)
                $('#panel2body').children().first().prepend(edit)
                $('#panel2body').children().first().prepend(remove)
                n++;
            });//end of link p2 click

             $('#p3addl').click(function(){
                edit=$('<button></button>').addClass('glyphicon glyphicon-edit').attr("id","edit").attr("data-toggle","modal").attr("data-target","editmod");
                remove=$('<button></button>').addClass('glyphicon glyphicon-remove').css('color','red').attr("id","gone");
                var text=$('#p3text').val();
                var link=$('#p3link').val();
                var node=$('<a><li></li></a>').text(text).attr('href',"https://"+link).attr("id","p3"+o);
                $('#panel3body').prepend(node)
                $('#panel3body').children().first().prepend(edit)
                $('#panel3body').children().first().prepend(remove)
                o++;
            });//end of link p3 click

            $('#logout').click(function(){
                $('#login').show()
                $('#user').show()
                $('#password').show()
                $('#logout').hide()
                $('#Person').remove()

                $('#add1').hide()
                $('#add2').hide()
                $('#add3').hide()

                $('#link1').hide()
                $('#link2').hide()
                $('#link3').hide()

                Owner=false;
                Camper=false;
                Supervisor=false;
                Councilor=false;

                $('li button').remove()
                $('a li').remove()
            });//logout click


        });//end of ready
        $('#add1').click(function(){

        });//end of add 1 click
    </script>
</body>

Answer 1

诺亚，

您的事件侦听器在呈现DOM时应用于HTML，或者基本上应用于document.ready 如果我正确看到这一点，一旦你预先添加元素＆amp;单击ADD后按钮

没有添加到新前置元素的事件侦听器
或者从初始加载到页面上已经存在的父元素上没有事件监听器，监听事件以“冒泡”＆＃39;

如果是后者，你可以专门用 $（^ parentElement ^）来查找该元素。（＆＃39;点击＆＃39;，＆＃39;＃edit＆＃39;，（）=＆gt; {}）; ....您需要将^ parentElement ^替换为您想要的元素。

如果你有多个相同的元素，你将不得不添加一个唯一的标识符 - 可能。这可以通过附加一个事件监听器而不是我喜欢的方法来预防，但是这里的其他人可能会这样做。

希望有所帮助。

Jquery attr没有向按钮添加工作ID

1 个答案: