Javascript Jquery append（）禁用按钮和文本框的功能_Javascript_Jquery_Html_Latex_Equation

Javascript Jquery append（）禁用按钮和文本框的功能

javascript jquery html latex

Javascript Jquery append（）禁用按钮和文本框的功能,javascript,jquery,html,latex,equation,Javascript,Jquery,Html,Latex,Equation,我正在尝试制作一个LaTex等式创建者，允许用户在文本框中键入LaTex代码，并实时输出LaTex等式第二个函数使用append（）允许用户复制具有多个输出div的多个文本框（当然每个文本框都有一个唯一的id），如果您键入一个等式文本框#2，LaTex输出将显示在输出div#2上。这意味着用户可以实时创建多个LaTex方程然而，当我测试我的代码时，第一个文本框（textbox_0）、输出div（result_0）和创建公式按钮（btn_0）（我没有创建公式）可以完美地工作。但是，当我创建一个

我正在尝试制作一个LaTex等式创建者，允许用户在文本框中键入LaTex代码，并实时输出LaTex等式

第二个函数使用append（）允许用户复制具有多个输出div的多个文本框（当然每个文本框都有一个唯一的id），如果您键入一个等式文本框#2，LaTex输出将显示在输出div#2上。这意味着用户可以实时创建多个LaTex方程

然而，当我测试我的代码时，第一个文本框（textbox_0）、输出div（result_0）和创建公式按钮（btn_0）（我没有创建公式）可以完美地工作。但是，当我创建一个公式文本框，形成第二个文本框和输出div（textbox_1和result_1）时，它们两个根本不起作用，只有原始的创建公式按钮可以创建其他文本框、输出div和创建公式按钮

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    var find_match_id = 0;
    var id_int = 0;
    </script>

</head>
<body>


<table>
    <ol>
        <tr>
            <td>
                <div id="results_0">Type in a LaTex equation. . .</div>
            </td>
            <td>
                <input type="text" id="search_text_0" onkeyup="findmatch(0);"><button id="btn0">Create Equation</button>
            </td>
        </tr>
    </ol>
</table>


</body>


<script>
$(document).ready(function(){
  $("#btn"+(find_match_id)+"").click(function(){

    var id_int = find_match_id;
    find_match_id = find_match_id + 1;


    $("ol").append("<tr><td><div id='results_"+(find_match_id)+"'>Type in an equation. . .</div></td><td><input type='text' id='search_text_"+(find_match_id)+" onkeyup='findmatch("+(find_match_id)+");'/><button id='btn"+(find_match_id)+"'>Create Equation</button></td></tr>");

  });
});

function findmatch(id_int){
    var word = document.getElementById('search_text_'+(id_int)+'').value;
    var text = '<img src="http://latex.codecogs.com/gif.latex?' + word + '"/>';

    document.getElementById('results_'+(id_int)+'').innerHTML = text;

}

</script>
</html>


var find_match_id=0；
变量id_int=0；
输入一个乳胶方程式。
创建等式
$（文档）.ready（函数（）{
$（“#btn”+（查找匹配_id）+”）。单击（函数（）{
var id\u int=find\u match\u id；
find_match_id=find_match_id+1；
$（“ol”）.append（“键入一个等式…首先，在定义搜索文本id之后，似乎缺少一个引号
这里应该有一个单引号^
id='search_text_"+(find_match_id)+"' onkeyup='findmatch("

其次，是.click（）函数只在您的第一个按钮上初始化，您创建了其他按钮，但从未为其分配新的单击处理程序。您必须在追加后立即找到该按钮并为其分配一个单击处理程序。您还可以使用范围更广的“绑定”方法将当前或将来的所有按钮绑定到回调，这样看起来会有些问题像这样：
$('body').on('click', '[id^="btn"]', function() {
  .. your append logic ..
});

选择器语法“id^=”表示id应以以下值开头，因此任何以id“btn”开头的元素都将由该单击处理程序处理。
HTML：

输入一个乳胶方程式。
创建等式

JQuery：
$（文档）.ready（函数（）{
$（文档）.on（'单击'，'.btn'，函数（）{
var id\u int=find\u match\u id；
find_match_id=find_match_id+1；
$（“ol”）.append（“输入方程式…创建方程式”）；
});
});

对动态创建的元素使用事件委派方法。也可以使用类选择器而不是id选择器
演示：
+首先，您不需要使用
而不是像这样从
追加：
$('body').on('click', '[id^="btn"]', function() {
  .. your append logic ..
});

jQuery：
$("table").append("<tr><td><div id='results_"+    (find_match_id)+"'>Type in a LaTex equation</div></td><td><input type='text' id='search_text_"+(find_match_id)+"'/> <button id='btn"+(find_match_id)+"'>Create Equation</button></td></tr>");

var find_match_id = 0;

var id = $(this).prop("id");
id = id.substring(12,13);
$("#results_"+id).html(text);

+第三，就像@Lochemage已经说过的，您可以使用jQuery函数“.on（）'将'click'和'keyup'事件的事件处理程序函数附加到所选的'input'和'button'元素。请查看下面我的演示中的重要更改。''现在可以使用'find_match_id'根据其邻居'进行更改。'下面是'keyup'事件中的明显更改，以检索用于中的正确id
jQuery：
$("table").append("<tr><td><div id='results_"+    (find_match_id)+"'>Type in a LaTex equation</div></td><td><input type='text' id='search_text_"+(find_match_id)+"'/> <button id='btn"+(find_match_id)+"'>Create Equation</button></td></tr>");

var find_match_id = 0;

var id = $(this).prop("id");
id = id.substring(12,13);
$("#results_"+id).html(text);

希望这能帮到你。谢谢@Lochemage的帮助回答
演示：
为什么要将TR
附加到OL
？您不应该这样做。另外，您可以用您的代码创建一个www.jsfiddle.net示例吗？按钮单击仅绑定到原始按钮，您需要使用类似jQuery的.on（）方法或绑定您创建的每个按钮。您正在删除委派事件。请阅读有关委派的部分。我认为这仍将仅绑定原始按钮，因为在计算代码时ID将为0。@rufio86，请检查演示。按钮ID已更新为0,1,2,3…n。似乎以前的“创建等式”按钮仅适用于y最新的一个是这样的。这种方法适用于“添加公式”部分，但它的第二个功能是，如果您键入文本框（更具体地说是LaTex代码），那么它旁边的显示div将从“键入公式”变为“输入公式”“到实际的LaTex输出。使用我的方法，原始文本框至少可以工作，但当我复制并粘贴JSFIDLE中的find math函数以实时使用LaTex更新输出div时，它不起作用。关于如何解决这个问题，有什么想法吗？@user3377126，你能为你的问题创建小提琴演示吗？”？