jquery 中的元素无法读取 css 文件

Element in jquery unable read css file

本文关键字：读取 css 文件 元素 jquery      更新时间：2023-09-26

我在同一个文件中有css样式和jquery脚本。但是我在jquery中的元素无法读取css。应该参与的元素是li，label，.selector，button。而且当我"单击此处"时，没有发出警报。

这是我的jquery脚本：

 $(document).ready(function(){
    $.ajax({
        //type: "POST",
        url: "http://10.1.17.20:8040/services/getArticle",
        success: function (data) {
            var data2 = data.result.target;
            btnTarget="<ul>";
            for(var i=0; i<data2.length; i++){
                btnTarget += "<li'><input id='"+data2[i].id+"' type='checkbox'>";
                btnTarget += "<label for='"+data2[i].id+"'>"+data2[i].target_name+"</label></li>";            
            } 
            btnTarget += "</ul>";  
            btnTarget += "<button type='button' id='btnMenu'>Click Here</button>"  
            $(".selector").append(btnTarget);
        },error: function (xhr, ajaxOptions, thrownError) {alert("ERROR:" + xhr.responseText+" - "+thrownError);}
    });
});
$("document").on("click", "#btnMenu", function(){
        alert("You Click");
 });

var nbOptions = 8;
    var angleStart = -360;
    // jquery rotate animation
    function rotate(li,d) {
        $({d:angleStart}).animate({d:d}, {
            step: function(now) {
                $(li)
                   .css({ transform: 'rotate('+now+'deg)' })
                   .find('label')
                      .css({ transform: 'rotate('+(-now)+'deg)' });
            }, duration: 0
        });
    }
    // show / hide the options
    function toggleOptions(s) {
        $(s).toggleClass('open');
        var li = $(s).find('li');
        var deg = $(s).hasClass('half') ? 180/(li.length-1) : 360/li.length;
        for(var i=0; i<li.length; i++) {
            var d = $(s).hasClass('half') ? (i*deg)-90 : i*deg;
            $(s).hasClass('open') ? rotate(li[i],d) : rotate(li[i],angleStart);
        }
    }
    $(document).on('click','.selector button',function(e){
        toggleOptions($(this).parent());
    });

这是 html 文件的一部分。

<section class="content">
                <!-- Your Page Content Here -->
                <div class="row">
                <!-- right column -->
                  <div class="col-md-12">
                    <!-- Horizontal Form -->
                    <div class="box box-info">
                      <!-- form start -->
                      <form class="form-horizontal">
                        <div class="box-body">
                          <div class="form-group">
                            <div class="selector">
                            </div><!-- /.selector -->
                          </div>
                        </div><!-- /.box-body -->
                      </form>
                    </div><!-- /.box -->
                  </div><!--/.col (right) -->
                </div><!-- /.row -->
            </section>

在这里我也放了一些 css 样式。这只是少数。css 样式太长

.selector button:hover { background: #3071a9; }
.selector button:focus { outline: none; }
.selector ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  top: -20px;
  right: -20px;
  bottom: -20px;
  left: -20px;
}
.selector li {
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0 50%;
  -webkit-transform: rotate(-360deg);
  transition: all 0.8s ease-in-out;
}
.selector li input { display: none; }

提前谢谢。

当你运行这个：

$("#btnMenu").on("click",function(){
    alert("You Click");
});

btnMenu 尚不存在，因此它无法绑定 eventHandler。 你可以像这样使用事件委托：

$("body").on("click", "#btnMenu", function(){
    alert("You Click");
});

它会起作用。

对于css，我的第一个想法是它与此有关：

<li'>

看到杂散的单引号了吗？ 可能把事情搞砸了。 此外，你的很多jquery都在$(document).ready(function(){之外，所以它可能运行得太早了。

尝试这个（清理了一些单引号：

 $(document).ready(function(){
    $.ajax({
        //type: "POST",
        url: "http://10.1.17.20:8040/services/getArticle",
        success: function (data) {
            var data2 = data.result.target;
            btnTarget="<ul>";
            for(var i=0; i<data2.length; i++){
                btnTarget += "<li><input id="+data2[i].id+" type='checkbox'>";
                btnTarget += "<label for="+data2[i].id+">"+data2[i].target_name+"</label></li>";            
            } 
            btnTarget += "</ul>";  
            btnTarget += "<button type='button' id='btnMenu'>Click Here</button>"  
            $(".selector").append(btnTarget);
        },error: function (xhr, ajaxOptions, thrownError) {
            //alert("ERROR:" + xhr.responseText+" - "+thrownError);
        }
    });
});

此外，您应该养成这样做的习惯，以防您要添加侦听器的元素在 DOM 中尚不存在：

$(document).on("click",$("#btnMenu"),function(){
    alert("You Click");
});

而不是： 

$("#btnMenu").on("click",function(){
    alert("You Click");
});
相关文章：