jQuery可以更改输入提交类型的文本但按钮不再可点击

Posted 2023-05-08

【中文标题】jQuery可以更改输入提交类型的文本但按钮不再可点击

【英文标题】：jQuery can change the text of input submit type but button is no longer clickable

【发布时间】：2020-10-31 06:28:02

【问题描述】：

我正在使用 jaquery 和 jquery mobile 1.8 版，并且我有一个像这样的按钮：

   <div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
        <input type="submit" name="Next" id="NextButton" value="Save"  /> 
   </div>

我有一个 javascript 可以像这样更改它的文本：

     $('#AnyButton').live('click', function()              
        if(true)
        
            $('#myButton div').text('Saving')
        
        else
            $('#myButton div').text('Continue');
    );

我尝试了许多其他不起作用的方法，但这有效，但是在我更改文本后，按钮似乎将 myButton div 内容替换为文本保存或继续，因此该按钮不再可点击。

在我的浏览器调试器中，按钮显示文本保存出现在 myButton 和 Nextbutton 输入之间。

像这样：

<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
"Save"
      <input type="submit" name="Next" id="NextButton" value="Save"  /> 
</div>

【问题讨论】：

"似乎替换了 myButton div 内容" $('#myButton div').text('Saving') ，是的，你指示它这样做。如果要更改输入的值，则应以输入 $('#NextButton').val('Saving') 为目标。

@Uroš 我尝试了第一件事，但它对我不起作用。我实际上用道具等尝试了很多方法.. 除了这种方式之外，没有一个替换文本。

您是否只对更改 div 中的字符串 "Save" 感兴趣？

@gaetanoM 不是真的，但似乎没有其他工作，所以这怎么可能？

.live( 已被删除 使用 .on('click', function 并且较新的版本因为 1.8 存在安全漏洞，并且较新的版本会更快

【参考方案1】：

我怀疑您的代码比您提供的更多。使用 jQuery Mobile，每个input 都被读取为一个按钮。所以你可能需要在动态更新后刷新它。

此代码正在运行：

$(function() 
  $("#NextButton").click(function(e) 
    e.preventDefault();
    $(this).val("Saving").button("refresh");
  );
);

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="ui-bar-a" id="myButton" style="bottom:0;position: fixed;width: 100%">
  <input type="submit" name="Next" id="NextButton" value="Save" />
</div>

查看更多：https://api.jquerymobile.com/button/ 和 https://demos.jquerymobile.com/1.4.5/button/

【讨论】：

我没有使用那个版本的 JQuery，它也没有使用这个点击按钮事件。这是需要触发它的不同事件。我在问题中使用 1.8。

@NoviceDeveloper 请用最小的、可重现的示例更新您的帖子：***.com/help/minimal-reproducible-example 您的 OP 未指定您使用的是 jQuery 1.8

@RyanWilson 在 FireFox 中没有看到错误。请澄清。

@RyanWilson 已修复。 Snippet 使用的是 HTTP，Chrome 对非安全链接很敏感。切换到 HTTPS，它现在应该可以在 Snippet 中为您工作了。

刷新做到了：) .button("refresh");

【参考方案2】：

如果我正确阅读了您的帖子，您想更改 输入，您需要更改它的 value 属性。 我认为.live 相对较旧且已弃用，应替换为.on 和委托事件处理程序

$('#AnyButton').live('click', function()              
    if(true)
        $('#myButton').find('input[type="submit"]').val('Saving');
    else
        $('#myButton').find('input[type="submit"]').val('Continue');
);

【讨论】：

这确实会改变值，就像'$('#NextButton').val('Saving')'。但是，问题是按钮上的文本没有改变。我使用警报检查了输入的值，该警报再次正确显示按钮上的文本未更新。

@NoviceDeveloper 你的html 中是否有多个按钮和相同的id？您的按钮是否是表单的一部分，并在点击时导致回发？我们确实需要更多关于您当前在代码和Html 中执行的操作的信息。具体来说，#AnyButton 是什么？

它是回发表单的一部分。 anybutton 就是任何随机按钮，它会触发动作。

如果您在表单中知道其他任何事情正在发生，那么也许答案，否则这种方式也有效：jsfiddle.net/q8xwLjuy

@NoviceDeveloper 如果您的按钮单击导致回发，它将阻止您的 javascript 代码执行。