Question

我正在尝试创建一个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>

有没有人知道问题是什么，我该怎么办？

Answer 1

首先，在定义search_text_＃id

后，似乎缺少引号

id='search_text_"+(find_match_id)+" onkeyup='findmatch("

此处应该有一个单引号 _________ ^

id='search_text_"+(find_match_id)+"' onkeyup='findmatch("

其次，.click（）函数仅在您的第一个按钮上初始化，您创建其他按钮但从不为其分配新的单击处理程序。您必须在追加后立即找到该按钮并为其指定一个点击处理程序。您还可以使用更广泛的“绑定”方法将当前或未来的所有按钮绑定到您的回调，它看起来像这样：

$('body').on('click', '[id^="btn"]', function() {
  .. your append logic ..
});

选择器语法'id ^ ='意味着id应该以以下值开头，因此任何以id'btn'开头的元素都将由此单击处理程序处理。

Answer 2

HTML：

<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" class="btn">Create Equation</button>
            </td>
        </tr>
    </ol>
</table>

的JQuery：

$(document).ready(function(){
    $(document).on('click', '.btn', 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)+"' class='btn'>Create Equation</button></td></tr>"); 
  });
});

对动态创建的元素使用事件委派方法。也可以使用类选择器而不是id选择器。

演示：

http://jsfiddle.net/s5rDB/5/

Answer 3

+首先，您不需要使用<ol>而不是像<table>这样追加：

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>");

HTML：

<table>
    <tr>
        <td>
            <div id="results_0">Type in a LaTex equation</div>
        </td>
        <td>
            <input type="text" id="search_text_0" />
            <button id="btn0">Create Equation</button>
        </td>
    </tr>
</table>

+其次，你只需要使用一个变量find_match_id，所以删除另一个变量：

jQuery的：

var find_match_id = 0;

+第三，就像@Lochemage已经说过的那样，你可以使用jQuery函数＆＃39; .on（）＆＃39;附加事件处理函数以“点击”＃39;和＆＃39; keyup＆＃39;所选元素的事件被输入＆＃39;和＆＃39;按钮＆＃39;。请看下面演示中的重要更改。＆＃39;＆＃39;现在可以根据其邻居＆＃39;＆＃39;使用＆＃39; find_match_id＆＃39;。以下是＆＃39; keyup＆＃39;要在

中检索正确ID的事件

jQuery的：

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

希望这可以帮到你。感谢@Lochemage提供的有用答案。

演示：http://jsfiddle.net/jasperlee/Tq8hH/

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

3 个答案: