Javascript/Jquery 尝试在另一个函数中应用 .html

Question

我认为我对标题的解释是正确的，但是我对 Javascript 还很陌生。

我正在尝试使用 jQuery 以表单形式输出实时计算。我想我可以使用以下方法让它工作:

$("#w_amount").on('keyup',function(){
   // alert('pressed')
        var totalcost= 11 * $(this).val() 
    $(".total_cost").html(totalcost);
})

和

<input id=\"w_amount\" type='text' class='l' style='width: 100px; text-align: center;' value=''>
<br><br>PlayCoins: <span class=\"total_cost\"></span>

因此计算出现在 span class=\"total_cost\"

问题是我试图将其应用到现有函数的“content:”部分，如下所示:

var converting;
function convert() {
  converting=false;
  $.msgBox({
    title:"Convert Funds",
    content:"<div id=\"_withdraw_content\"><br><small>Amount of Doge to convert:</small><br><br><input id=\"w_amount\" type='text' class='l' style='width: 100px; text-align: center;' value=''><br><br>PlayCoins: <span class=\"total_cost\"></span><br></div>",
    type:"info",
    opacity:0.8,
    buttons: [{ value: "Withdraw" }, { value: "Cancel" }],
    success: function(button) {
      if (button=="Withdraw" && withdrawing==false) {
        w_amount=$("input#w_amount").val();
        w_valid=$("input#w_valid_ltc").val();
        if (w_amount!='' && w_valid!='') {
          $("#_withdraw_content").html('<div style=\"height: 50px;\"></div>&nbsp;&nbsp;&nbsp;<img src="content/images/ajax_loader.gif">');
          withdrawing=true;
          _requestWithdraw(w_amount,w_valid);
        }
        else {
          alert('One of required fields stayed empty!');
        }
      }
    }
  });      
  return false;

如果有人能告诉我在哪里放置代码以便它可以工作，我将不胜感激!

谢谢!

Answer 1

由于您的元素是动态添加的，因此您需要使用 event delegation使用 $(document).on('keyup', '#w_amount', function(){ // your code here.....}); 监听这些元素上的事件

<小时/>

html 中的斜杠是由于 html 字符串创建不正确造成的。在 javascript 中生成 html 时，请确保将字符串用单引号 'like this' 括起来。 。这样，当您想在 html 中写入像 '<input class="myclass"' 这样的属性时， ，你不必逃避 "人物。否则你最终会得到 "<input class="myclass""除非你用斜杠转义引号，否则这不是有效的 JavaScript。

看，这行代码使用双引号来包裹字符串，因此它有斜杠来转义内部引号:

content:"<div id=\"_withdraw_content\"><br><small>Amount of Doge to convert:</small><br><br><input id=\"w_amount\" type='text' class='l' style='width: 100px; text-align: center;' value=''><br><br>PlayCoins: <span class=\"total_cost\"></span><br></div>"

但请注意，这一行实际上使用单引号来包裹字符串。因为它确实如此，所以您不需要斜杠来转义引号，事实上，斜杠只是作为字符串的一部分读取并在 html 中输出。

$("#_withdraw_content").html('<div style=\"height: 50px;\"></div>&nbsp;&nbsp;&nbsp;<img src="content/images/ajax_loader.gif">');

<小时/>

您还需要删除 html 中的所有斜杠。

$(document).on('keyup', '#w_amount', function(){
   // alert('pressed')
    var totalcost= 11 * $(this).val() 
    $("#total_cost").html(totalcost);
})



var converting;
function convert() {
  converting=false;
  $.msgBox({
    title:"Convert Funds",
    content:'<div id="_withdraw_content"><br><small>Amount of Doge to convert:</small><br><br><input id="w_amount" type="text" class="l" style="width: 100px; text-align: center;" value=""><br><br>PlayCoins: <span id="total_cost"></span><br></div>',
    type:"info",
    opacity:0.8,
    buttons: [{ value: "Withdraw" }, { value: "Cancel" }],
    success: function(button) {
      if (button=="Withdraw" && withdrawing==false) {
        w_amount=$("input#w_amount").val();
        w_valid=$("input#w_valid_ltc").val();
        if (w_amount!='' && w_valid!='') {
          $("#_withdraw_content").html('<div style="height: 50px;"></div>&nbsp;&nbsp;&nbsp;<img src="content/images/ajax_loader.gif">');
          withdrawing=true;
          _requestWithdraw(w_amount,w_valid);
        }
        else {
          alert('One of required fields stayed empty!');
        }
      }
    }
  });      
  return false;
  
  }
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="w_amount" type="text" class="l" style="width: 100px; text-align: center;" value="">
<br><br>PlayCoins: <span id="total_cost"></span>