logo标签列表

为什么我的jQuery .css函数不起作用？

javascriptajaxjquery
3

我正在构建一种与MySQL连接的添加/删除标签列表。我已经成功通过ajax调用从数据库中获取标签并进行显示，但我无法对它们进行任何操作，甚至不能应用常规样式。当我使用Firebug检查时，所有的HTML代码似乎都没有问题，所以我无法弄清楚问题出在哪里。以下是我的代码：

jQuery：

 $(document).ready(function() {

   $("#ontvangenjson").css("border","3px solid red");


   $.getJSON("jason2.php", function(data) {

      $.each(data, function(){

        var merkTag = " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";

         $("#ontvangenjson").append(merkTag);

               });

           });

       });

PHP: jason2.php

 $merken_lijst = "SELECT favorietemerken.pkFavorietemerken, favorietemerken.merken FROM favorietemerken JOIN bedrijven ON bedrijven.pkBedrijvenID=favorietemerken.fkBedrijvenID WHERE favorietemerken.fkBedrijvenID=$neem_id";


 $rows = array();
 $sth = mysql_query($merken_lijst);
 while($r = mysql_fetch_assoc($sth)) {
 $rows[] = $r;
}
print json_encode($rows);

收到的JSON数据：

 [{"pkFavorietemerken":"71","merken":"Nike"},{"pkFavorietemerken":"70","merken":"Le Coq Sportif"},{"pkFavorietemerken":"69","merken":"Converse"},{"pkFavorietemerken":"68","merken":"Champion"},{"pkFavorietemerken":"67","merken":"Adidas"}]

HTML:

<body>


  <h1><label for="brands-form-brand">Get JSON data</label> <input type="button" id="knop" value="get JSON" /></h1>

  <hr />

  <p class="section-title"><strong>JSON Data received</strong></p>


  <div id="ontvangenjson">  </div> 

</body>

回答

经过大量的研究，我终于解决了这个问题。代码并没有真正出错，但其中一部分放错了位置。get.JSON 是异步的，这意味着如果你想使用 jQuery .css 函数进行任何更改，你需要在 getJSON 的回调函数内执行。

  $.getJSON("jason2.php", function(data) {
   var merkTag = "";
  $.each(data, function(){
  merkTag += " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";
  });

  $("#ontvangenjson").append(merkTag);

  // NEW CODE
  $(".deletemerk").css("border","3px solid red");
  });
3个回答
4
好的，这很奇怪，在我的页面上其他元素上可以工作。但我会记住的。 - the_boy_za
1
如果你想使用边框的三个属性，尝试独立定义它们，这可能会解决你的问题。
@Patrik Bhatt，真正的问题似乎是我无法对$（“#ontvangenjson”）执行任何操作，甚至不能弹出警报。 - the_boy_za
0

我不确定这会解决你的问题，但我建议你先尝试清理一下你创建链接的方式。你可能漏掉了一个或两个引号。不要使用转义或未转义的双引号，而是用单引号将字符串括起来：

var merkTag = '<a class="deletemerk" href="http://localhost/website/remove_merk.php?id='
              + this.pkFavorietemerken 
              + '">' 
              + this.merken 
              + '</a>';

这样做可以让你在构建HTML字符串时自由使用双引号。我在这里使用了多行只是为了更清晰明了。清晰胜于简洁。

是的，我承认我的链接没有以规范的方式创建，但不幸的是这不是问题所在。我已经用你的链接测试过了。 - the_boy_za
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接