jQuery：点击时用输入值替换正文文本

Question

我想通过单击按钮将文本区域中两个特定字符之间的数据替换为输入字段的数据。到目前为止，我有这个：

$("#apply_capping").click(function() {
    $("body").children().each(function() {
        $(this).html($(this).html().replace(/(?<=\*).*?(?=\))/g,$("#cap").val()));
    });
}); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popunder-capping" class="panel-collapse collapse" style="background-color:#fff;color:#000">
      <ul class="list-group">
        <li class="list-group-item">
    <label class="cappings">Hour(s):</label> <input type="number" min="1" max="168" class="select-selected" id="cap" name="cap" size="1" maxlength="3"> 
        </li>
      </ul>
    <button id="apply_capping" type="submit" class="btn btn-primary">
    Apply
    </button>
</div>

<div class="portlet-body">
    <ul class="list-group">
        <li class="list-group-item">
            <label style="width:100%;">
                <i class="fas fa-code fa-fw"></i> Source Code
            </label>
            <br/>
<textarea id="parammed_popunder" rows="3" width="200" class="form-control">
wait:(3600*24)           </textarea>
        </li>
    </ul>
</div>

在我这端，它实际上是从带有 id cap 的元素中复制值并将其替换到文本区域中。问题是除非刷新页面，否则不能使用两次，并且该值从输入中消失。我应该如何处理？

Answer 1

你应该改变：

$("#apply_capping").click(function() {
    $("body").children().each(function() {
        $(this).html($(this).html().replace(/(?<=\*).*?(?=\))/g,$("#cap").val()));
    });
});

到：

$("#apply_capping").click(function() {
    $("body").find("textarea#parammed_popunder").val(function() {
        return $(this).val().replace(/(?<=\*).*?(?=\))/g,$("#cap").val());
    });
});

问题是您当前的代码更改了您网站上的html，因此绑定到点击事件的 dom 元素不再存在。

$("#apply_capping").click(function() {
    $("body").find("textarea#parammed_popunder").val(function() {
        return $(this).val().replace(/(?<=\*).*?(?=\))/g,$("#cap").val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="popunder-capping" class="panel-collapse collapse" style="background-color:#fff;color:#000">
      <ul class="list-group">
        <li class="list-group-item">
    <label class="cappings">Hour(s):</label> <input type="number" min="1" max="168" class="select-selected" id="cap" name="cap" size="1" maxlength="3"> 
        </li>
      </ul>
    <button id="apply_capping" type="submit" class="btn btn-primary">
    Apply
    </button>
</div>

<div class="portlet-body">
    <ul class="list-group">
        <li class="list-group-item">
            <label style="width:100%;">
                <i class="fas fa-code fa-fw"></i> Source Code
            </label>
            <br/>
<textarea id="parammed_popunder" rows="3" width="200" class="form-control">
wait:(3600*24)           </textarea>
        </li>
    </ul>
</div>