用Javascript在具有相同类的按钮上显示标签

Javascript to display labels on the button with the same class

本文关键字：按钮 显示 标签 同类 Javascript      更新时间：2023-09-26

这里有一个简单的问题：

页面上有两个javascript。第一个脚本获取JSON，并使用它构建多个带有按钮的表单：

$.getJSON("http://api.server.com/my/?callback=?",
    function(data){
        var results = [];
        $.each(data['results'], function(i, result) {
            results.push("<div class='accordion-group span4'><div class='accordion-heading'>Video Frame<blockquote><a href='http://server.com/video/?my=" + result.File + "' target='_blank'><img src='http://jpg.server.com/" + result.File + ".jpg' class='img-polaroid'/></a><p>" + result.ListId + "</p><small>" + result.OwnerId + "</small><small>" + result.updatedAt + "</small>    </blockquote><a class='accordion-toggle' data-toggle='collapse' data-parent='#accordion2' href='#" + result.File + "'>Share video</a></div><div id='" + result.File + "' class='accordion-body collapse'><div class='accordion-inner'><form class='share_file_form'>Set list<input name='nd' id='user_id' type='hidden'><input name='file' value = '" + result.File + "' type='hidden'><div class='list'></div><input type='text' placeholder='New list'><div class='modal-footer'><button class='share_file_submit'>Share video</button></div></form><div id='user_info_result'></div></div></div></div>");
        });
        $('#mytile').html(results.join(""));
    }
);

第二个脚本是通过按下构建第一个脚本形式上的按钮做出的响应：

$(document).on('click', '.share_file_form', function(event) {
    $(this).validate({
        submitHandler: function(form) {
            $.ajax({
                type: "GET",
                url: "http://api.server.com/set/",
                timeout: 20000,
                data: $(form).serialize(),
                beforeSend: function() {
                    $(".share_file_submit").attr("disabled", true);
                    $(".share_file_submit").html("Send <img src='http://src.server.com/loadr.gif' border='0'/>");
                },
                success: function(msg){
                    console.log("Data Saved: " + msg);
                    $("#share_file_submit").attr('disabled', false);
                    $("#share_file_submit").html("Share video");
                    $("#user_info_result_2").html(msg);
                },
                error: function(msg){
////////////////            $('#user_info_result_2').html("<div class='alert alert-error span3'>Failed from timeout. Please try again later. <span id='timer'></span> sec.</div>");
                }
            });
        }
    });
});

一切都有效，但在第二个脚本的时候，铭文出现在所有形式的按钮上，我只需要一个按钮，我点击它。

问题是这一行：

$(".share_file_submit").html("Send <img src='http://src.server.com/loadr.gif' border='0'/>");

它为整个页面上具有"share_file_submit"类的所有元素设置html。您可以通过向选择器添加上下文来修复它：

$(".share_file_submit", $(form)).html("Send <img src='http://src.server.com/loadr.gif' border='0'/>");

如果你真的想正确使用验证插件，你不应该在点击处理程序中初始化它。

应该在表单构建代码之后立即初始化。

$.getJSON 内

$('#mytile').html(results.join(""));
$('.share_file_form').validate(/* options*/);

submitHandler将覆盖表单的默认submit事件，并且在用户填写表单时验证将处于活动状态。

修复按钮问题：

submitHandler: function(form) {// form is current form elemnt
   $.ajax({
        beforeSend:function(){
             /* look within form for button*/
              $(form).find(".share_file_submit").prop('disabled',true);
          })
    });

现在，如果用户使用Enter键，则不依赖于点击事件来阻止浏览器默认提交

相关文章：