Question

我将以下html加载到我的网页上的div中：

<style>
    #site h1{
        margin: 1em 0;
        padding: 0;
        width: 100%;
        display: inline-block;
        font-size: 2em;
    }
    #site h2 {
        margin: 0;
        padding: 0;
    }
    #site p {
        margin: 0 0 1em 0;
        padding: 0;
    }
    #site button {
        width: 100%;
        margin: 0.5em auto;
        color: #fff;
        background-color: #913D88;
        border: none;
        padding: 0.5em;
    }
</style>

<div id="site">
</div>
<br />
<script>
    $(document).ready( function() {
       var url = "JSON/sites.json";       
       $.getJSON(url, function(response) {
           var siteHTML ="";
           $.each(response, function(index, site) {
                siteHTML += "<h1>" + site.name + "</h1>";               
                siteHTML += "<p>" + site.reviewText + "</p>";
                siteHTML += "<button type='button' value='" + site.url + "'>Go check it out</button>";
                siteHTML += "<hr>";
           }); //ends callback loop
           $('#site').html(siteHTML);
       }); //end get JSON
       $('button').click(function (event) {
           event.preventDefault();
           var url = $(this).attr('value');
           window.open(url);
           });
    });  //end document ready
</script>

基本上，它的作用是从JSON文件加载数据，然后创建一些html标记，以及一个应该包含url作为值的按钮。这是JSON文件：

[
  {
    "name":"Traffic Monsoon",
    "url":"https://trafficmonsoon.com/land.php?id=1&ref=Shooshly",
    "reviewText" : "A good feeder site. I'm seeing 15 to 20 ads daily, bringing me to 10 to 15 cents a day. Takes me about 5 minutes, wich for the pay is a good day. The best thing is, if you gain a referral, he brings you 100% of his clicks, or another 10 to 15 cents. You have to surf 10 pages though, which takes you about 4 minutes. But with 10 referrals, that's a buck a day. They also offer credits for surfing, which opens up your page to other people. They also offer revenue sharing positions, 55 bucks for 50, that I can't yet comment on. No info to be found on the expected ROI. "
  },
  {
    "name":"Neobux",
    "url":"http://www.neobux.com/m/v/?rh=53686F6F73686C79",
    "reviewText" : "Respect you elders! A site paying for 7 years will greet you with ads worth about 3 cents a day. A minimum payout of 3$ means you'll be clicking your way for three months or so. It gives you offers to work and earn on crowdflower, but Clixsence is might be better for that. My personal experience says that the rented referrals require a costly upgrade of 90$ per year for them to be profitable, unless you're content with making a few cents a year ... No really, as a free member, you have to work hard to find the hidden gems. So, rather cashout and reinvest. Though the free click bonus seems to drop after you cashout ... "
  },
  {
    "name":"Inadbux",
    "url":"http://www.inadbux.com/?ref=Mojtomas",
    "reviewText":"One of the sites that proves it can take care of itself. Active rented referrals that together brought in 3.60$ in the first month. On top of that you gain 10 to 15 cents from you own clicks. The site's still a new one, so proceed with caution. "
  },
    {
    "name":"Inadclicks",
    "url":"http://www.inadclix.com/?ref=Shooshly",
    "reviewText":"Sister site to inadbux. Again, One of the sites that proves it can take care of itself. Active rented referrals that together brought in 3.60$ in the first month. On top of that you gain 10 to 15 cents from you own clicks, while you can buy direct referrals with a 6 level downline for 2.50 per one. The site's still a new one, so proceed with caution. "
  },
    {
    "name":"Clixsence",
    "url":"http://www.clixsense.com/?7339208",
    "reviewText":" A site paying for years. You can easily do 3 to 5$ a day on this site, working through surveys and doing crowdflower tasks. You gain a bonus for completing certain daily tasks so yeah. On the PTC side, expect to get 0.03 to 0.04$ daily. There are no rental referrals, but a good ref downline that can earn you a ton of cash. A high payout of 8$ still makes it a good feeder for other sites. "
  },
    {
    "name":"Ultimateclixx",
    "url":"http://www.ultimateclixx.com/?ref=Shooshly",
    "reviewText":"A good site. You gain up to 10 cents a day, but it is my first choice deposit wise. Offering rented referrals, buying direct referrals on the market for as low as 0.75$, this makes it one of the best. Boasting the cheapest investement upgrades (10 to 15$ a month), this makes it a prime for building your income. All statistics open for view, wonderful and helpful admin, great and guick support, this is pretty much a must. I see this one running for a long way to come. "
  }
]

现在当我点击按钮时没有任何反应。我尝试在浏览器中打开页面console.log($('button').attr('value'));，然后返回undefined并在下一行1 url（JSON文件中的第一个）。

我在猜测问题是该按钮的值包含2个值，一个未定义的对象和一个url？我做错了什么，我无法弄明白。谢谢你的帮助

Answer 1

尝试将按钮单击事件移动到getJSON函数中（在.html（..）行之后

 $(document).ready( function() {
       var url = "JSON/sites.json";       
       $.getJSON(url, function(response) {
           var siteHTML ="";
           $.each(response, function(index, site) {
                siteHTML += "<h1>" + site.name + "</h1>";               
                siteHTML += "<p>" + site.reviewText + "</p>";
                siteHTML += "<button type='button' value='" + site.url + "'>Go check it out</button>";
                siteHTML += "<hr>";
           }); //ends callback loop
           $('#site').html(siteHTML);
           $('button').click(function (event) {
               event.preventDefault();
               var url = $(this).attr('value');
               window.open(url);
           });
       }); //end get JSON
    });  //end document ready

Answer 2

您正在动态创建按钮。在这种情况下，您应该使用.on（）jquery方法来附加事件。这是代码。

＆＃13;

$(document).on('click','button',function (event) {
      event.preventDefault();
      var url = $(this).attr('value');
      window.open(url);
});

＆＃13;

window.open不适用于使用jQuery创建的按钮

2 个答案: