检索单击事件backbonejs上的动态html元素

我正在学习Backbonejs。我对使用handlebars.js添加的动态元素有问题。这是我的HTML片段： HTML检索单击事件backbonejs上的动态html元素

<section class="single-item"> 
    {{#each [0]}} {{#if name}} 
    <div class="card col s12"> 
     <form action="/productdetail" id="product-form"> 
      <div id="dettagliofromhomepage" class="card-image"> 
       {{#if img}} 
       <img id="imgslide" src="{{img}}" data-prod="{{id}}"> {{else}} 
       <img id="imgslide" src="img/no.jpg" data-prod="{{id}}"> {{/if}} 
      </div> 
      <div id="card-border" class="col s12"> 
       <div class="card-content col s6"> 
        <p class="productTitle">{{name}} 
         <br> €{{price}} 
        </p> 
       </div> 
       <div class="card-action col s6 "> 
        <a id="bottone-ca" class="waves-effect waves-light btn light-green darken-3"><i class="material-icons">add_shopping_cart</i></a> 
       </div> 
      </div> 
     </div> 
     {{/if}} {{/each}} 
    </section>

我想锚“BOTTONE-CA”输出上单击节“单项”的元素的值。即我想在“卡内容”类中检索<p>的值。我使用构造“each”动态添加五个元素。然而，当我尝试在js上使用运算符“this”时，我可以得到我添加的项目的第一个元素作为输出。这是我的JS代码片段：

define(function(require) { 

var $ = require("jquery"); 
var Backbone = require("backbone"); 
var Products_homepage = require("models/Products_homepage"); 
var Products = require("models/Products"); 
var MyCollection = require("collections/Categories"); 
var localizzatoreView = require("views/pages/localizzatoreView"); 
var Utils = require("utils"); 
var productHomepage = require("models/productHomepage"); 
var onlineProduct = require("models/onlineProduct"); 
var saleProduct = require("models/saleProduct"); 


var MyView = Utils.Page.extend({ 
    constructorName: "MyView", 
    model: Products_homepage, 

    initialize: function() { 
     this.template = Utils.templates.myview; 
    }, 

    id: "myview", 
    className: "i-g page", 

    events: { 
     "click #imgslide": "prodotto", 
     "click #bottone-ca": "carrello" 
    }, 

    render: function() { 

     var that = this; 

     var online = new onlineProduct(); 
     var sale2 = new saleProduct(); 
     var arraytest = []; 
     var loca= localStorage.getItem("localizzazione"); 

     online.fetch({ 
      success: function() { 

       arraytest[0]=(online.attributes); 
       test= online.attributes; 


       sale2.fetch({ 
        success: function() { 

         $(that.el).html(that.template(arraytest)); 

         that.startslider(); 
         that.startnav(); 

         return that; 
        } 
       }); 
      } 
     }); 

    }, 

    carrello: function(e) { 
     var arraytemp = []; 
     arraytemp = localStorage.getItem("Carrello"); 

     var idprod = $('#id_prodotto').val(), 
     name = $("#name").val(), 
     img = $("#img").val(), 
     price = $("#price").val(), 
     quantity = 1; 

     /*Here i want to retrieve element that i clicked */ 

     var prod = new Products({ 
      name: name, 
      id: idprod, 
      img: img, 
      price: parseFloat(price).toFixed(2), 
      quantity: quantity, 
      total: price * quantity 
     }); 

     var Carrello = JSON.parse(localStorage["Carrello"]); 
     Carrello.push(prod); 
     localStorage["Carrello"] = JSON.stringify(Carrello); 

     Backbone.history.navigate("basket", { 
      trigger: true 
     }); 

    } 
});

对不起提前片段中的任何错误。我是JavaScript和骨干的新手。预先感谢您的帮助。我使用Stack Overflow作为学习工具。

来源

2016-06-07 Lukigno13

您的模板是否将多个产品表单（＃product-form）折叠到页面上？如果是这样，你会有很多重复的元素ID。这不是有效的HTML。 – 76484

由于您使用的是id选择器，因此您总是会获得像$('#id_prodotto')这样的全局选择器的第一个元素。 id在整个文档中应该是唯一的，并且浏览器返回第一个匹配项。你不应该在动态模板中使用静态的id。改用CSS类或其他属性。

这就是说，以便它返回具有id最近的元素，例如$(event.currentTaget).closest('#card-border').find('p').text()您可以通过事件对象访问当前元素像$(event.currentTaget);和查询相关的事件目标DOM。

但是仍然建议不要有相同的多个元素id。

来源

2016-06-08 05:53:08

检索单击事件backbonejs上的动态html元素

回答

相关问题