jQuery-将功能从点击事件更改为页面加载

Question

我在ascx中有一个jQuery代码，该代码从gridview中获取单元格内容并对其进行处理，然后将其写入其他单元格中。

通过单击gridview行激活它。

（每行具有第一个带有Word文件名的单元格。用户单击一行-jQuery在第一个单元格中获取文件名，并将扩展名更改为flv / mp3-检查是否存在具有新名称的文件-是否存在一个文件，它将创建指向该文件的图像链接）

我在此代码上进行了艰苦的工作，但是现在客户端希望该事件（意味着显示是否存在带flv / mp3的文件的图像链接）将在页面加载时发生。

我不想再写一遍，并认为应该有一种方法来更改click事件。

问题是我使用jQuery的效率不是很高：)

jQuery热门功能可以帮上忙吗？

这是代码（我不为这段代码感到骄傲，但它能完成工作）：

    <script type="text/javascript">
    jQuery(function() {
        jQuery(".SearchResultsGV > tbody > tr:not(:has(table, th))")
            .css("cursor", "pointer")
            .one("click", function(e) {

                var jQuerycell = jQuery(e.target).closest("td");


                var jQuerycurrentCellText = jQuerycell.text();
                var jQueryleftCellText = jQuerycell.prev().text();
                var jQueryrightCellText = jQuerycell.next().text();
                var jQuerycolIndex = jQuerycell.parent().children().index(jQuerycell);
                var jQuerycolName = jQuerycell.closest("table")
                    .find('th:eq(' + jQuerycolIndex + ')').text();
                //Check media 1
                jQuery.ajax({
                    url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3'),
                    type: 'HEAD',
                    error:
                        function() {
                            //do something depressing
                            jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

                        },
                    success:
                        function() {
                            //do something cheerful :)
                            var jQueryMedia1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.mp3') + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>')
                            jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name);

                        }
                });
                //Check media 2
                jQuery.ajax({
                    url: 'http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv'),
                    type: 'HEAD',
                    error:
                        function() {
                            //do something depressing
                            jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

                        },
                    success:
                        function() {
                            //do something cheerful :)
                            var jQueryMedia2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' + jQuerycell.parent().children().first().text().replace('.doc', '.flv') + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>')
                            jQuery(jQuerycell.parent().children().last()).append(jQueryMedia2Name);

                        }
                });
            });
    });
</script>

Answer 1

我猜想，在页面加载事件上执行操作会使事情变得更简单。 有些事情会改变：

• 使用选择器，您可以找到所需的td元素（单元格），而不必使用event.target属性来查找该元素（只需将td附加到选择器主体的末尾）

• 我不明白为什么您要依靠jQuery.index(el)来引用您的元素，为什么不使用id属性呢？ 即：

  <th id="th_5"></th> <td id="td_5"></td>

然后，当您对td元素进行操作时，可以执行以下操作：

var th_id = $(this).attr("id").replace("td", "th");
var th_text = $("#" + th_id).text();

• jQuery为您提供$(this) ，它指向当前元素（在您的情况下为td $(this)的句柄，请使用它
• jQuery还提供了siblings()方法，因此您可以使用它来代替parent().children()

现在，为了使更改在页面加载时发生，我将执行以下操作（我在一些更改之前加了一些注释，希望对您有所帮助）：

$(document).ready(function() {
// being here means that the page is loaded, and we can start
// iterating over the elements

// you have to update your selector to choose td elements
// which I honestly can't tell how with ur selector, UPDATE THIS
  var my_elements = $(".SearchResultsGV > tbody > tr:not(:has(table, th))");

  $.each(my_elements, function() {
        // not needed anymore, we're using $(this)
        //var jQuerycell = jQuery(e.target).closest("td");

        var currentCellText = $(this).text();
        var leftCellText = $(this).prev().text();
        var rightCellText = $(this).next().text();

        // assuming that you have adapted to assigning ids as I have outlined above
        var colName = $("#" + $(this).attr("id").replace("td", "th")).text();

        // I assume this is the Word file you talked about, save it since you're using it often
        var files = { 
            mp3: $(this).siblings().first().text().replace('.doc', '.mp3'),
            flv: $(this).siblings().first().text().replace('.doc', '.flv')
        }

        //Check media 1
        jQuery.ajax({
            // I can't tell what you're referencing here, but I think you only have to update jQuerycell with $(this)
            url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.mp3,
            type: 'HEAD',
            error: function() {
            //do something depressing

                // you're calling parent().children(), why not call siblings()? :)
            //jQuery(jQuerycell.parent().children().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");
                $(this).siblings().last().append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");

            },
            success: function() {
                //do something cheerful :)

                var media1Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/' 
                + files.mp3 
                + '><img class="soundFile" src=http://dtora.org.il/Portals/0/images/Music.png /></a>')
                $(this).siblings().last().append(media1Name)
                // same note here
                //jQuery(jQuerycell.parent().children().last()).append(jQueryMedia1Name);

            }
           });
            //Check media 2
            jQuery.ajax({
            url: 'http://dtora.org.il/Portals/0/Shiurim/' + files.flv,
            type: 'HEAD',
            error: function() {
                //do something depressing
                $(this).siblings().last()).append("<img src=http://dtora.org.il/Portals/0/images/noFiles.png />");
            },
            success: function() {
                //do something cheerful :)
                var media2Name = ('<a href=http://dtora.org.il/Portals/0/Shiurim/'
                    + files.flv
                    + '><img class="videoFile" src=http://dtora.org.il/Portals/0/images/Video.png /></a>')
                $(this).siblings().last().append(media2Name);
            }
        });
  });
});

我希望能回答您的问题，因为我仍然不确定该代码的某些部分，请复习一下！

更新 ：实际上，我不认为描述如何在此处引用th或td元素的方式是最佳实践。 我在自己的应用程序中所做的工作是获得对父级的引用，然后使用选择器查找我感兴趣的其他元素（兄弟姐妹）。 因此，与其做：

$(this).attr("id").replace(...)可以简单地做： var parent = $(this).parent(); 然后使用选择器将处理程序带到那里的孩子那里。

不用说，这将使您免于为每个元素生成“唯一” id字段的麻烦，而且，我相信jQuery选择器的存在是出于这个原因； 允许您使用DOM而不是您设置的某些任意属性进行引用。 在您的应用程序中，您可能需要ID来获取我未见过的内容，因此，如果您这样做了，那么现在就知道了两种方式：）

Answer 2

由于您发布的函数将在$(document).ready ，因此如果您仅触发点击，这应该是最简单的方法。

只是看着代码的末尾，
其实：

            });
    });
</script>

修改：

                }).click();
    });
</script>