Question

刚刚开始使用jQuery，到目前为止我已经取得了一些成功。我创建了一个更新＆lt; table＆gt;的处理程序每次用户从下拉列表中进行选择时。看起来大概是这样的：

function loadAttributes() {
$.ajax({
    type: "POST",
    url: "../ws/itemSearch/getAttributesForItemType",
    contentType: 'application/xml',
    data: '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://service.itemsearch.foo.com/">'
          + '<soapenv:Header/><soapenv:Body><ser:getAttributesForItemType>'
          + '<arg0>' + this.value + '</arg0>'
          + '</ser:getAttributesForItemType></soapenv:Body></soapenv:Envelope>',
    processData: false,
    dataType: "xml",
    success: function(data) {
        var attributes = '<table summary="Attribute Section"><tr class="underline">';

        var attCount = 0;

        $(data).find("return").each(
            function() {
                if (++attCount % 4 == 0) {
                    attributes += '</tr><tr class="underline">';
                }

                // TODO PMA click handler to the new <td> element
                attributes += '<td>' + this.textContent + '</td>';
            }
        );

        attributes += '</tr></table>';

        $("div[id=attributes]").html(attributes);
    }
});
}

正如您所看到的，我的下一步不仅仅是添加文字＆lt; td＆gt;包含属性的行的元素，但是向它们添加单击处理程序。此单击处理程序将附加＆lt; td＆gt;的内容。到文本框;类似的东西：

tdItem.click(function() {
    $("input[name=search]").append(tdItem.textContent);
}

为此，我更喜欢将每个td项创建为单独的元素，并使用＆lt; tr＆gt;以面向对象的方式构建表。元素，而不是粘贴一个文字字符串，这是我现在正在做的。 jQuery站点上的大多数示例都与向现有元素添加侦听器有关，而不是每次都在运行时像这样构建文档的新部分。至少，有人能指出我如何完成我想要做的事情的好教程吗？

Answer 1

这实际上很容易实现，我建议在编写html构建时利用一些jQuery函数。

首先$("<tr></tr")将创建一个存储在jQuery对象中的tr元素，就像刚刚选择它一样。如果您正在构建如上所述的html，我建议您在成功函数中更改为类似的内容。

    var attributes = $('<table summary="Attribute Section"></table>');

    var attCount = 0;
    var attributeRow = $('<tr class="underline"></tr>');

    $(data).find("return").each(
        function() {
            if (++attCount % 4 == 0 && attCount != 0) {
                attributes.append(attributeRow.clone());
                attributeRow = $('<tr class="underline"></tr>');
            }

            // TODO PMA click handler to the new <td> element
            var attribute =  $('<td>' + this.textContent + '</td>'); 
            attribute.click(function(){//click function});              
            attributeRow.append(attribute );

        }
    );
    //add the last attribute row
    attributes.append(attributeRow);
    $("div[id=attributes]").append(attributes);

上面你会注意到你现在已经生成了作为jQuery对象生成的属性td，你可以将点击功能应用到。

Answer 2

使用字符串文字执行此操作的唯一方法是向onclick元素添加td属性，例如

 attributes += '<td onclick="somefunction();">' + this.textContent + '</td>';

可行，但我不建议这样做。要保持不引人注目，请使用jQuery对象创建表。例如

  success: function(data) {  
    var $table = $('<table summary="Attribute Section"></table>');

    $table.append($('<tr class="underline"></tr>'));

    var attCount = 0;  

    $(data).find("return").each(  
        function() {  
            if (++attCount % 4 == 0) {  
                $table.append($('<tr class="underline"></tr>').append($('<td/>', {
                    click:   function(e){
                         alert($(this).text());
                    }
                }))); 
            }  
        }  
    );  

    $("div[id=attributes]").empty().append($table);  
}

Answer 3

对我来说，对td的点击处理更优雅的方法是在表本身上放置一个单击处理程序，让它捕获从td中冒出的点击事件。这样您就不必担心向表中的每个td添加处理程序。虽然在这种情况下，我对这方面的表现也很重要。

这是你要做的（你可以在声明$ table变量后添加它）：

$table.click(function(e) {
   var target = $(e.target);

   if (target.is('td')) {

      var input = $('input[name=search]');
      input.val( input.val() + target.text() );

      e.stopPropagation();
   }
});

在jQuery中动态创建具有客户行为的元素

3 个答案: