如何处理动态父子对象上的事件

时间:2016-09-05 17:53:56

标签: javascript jquery html css

我对Dynamic Child Inside Dynamic Parent仍然不满意,其中很多让我感到困惑,更糟糕的是如何知道哪一次以及如何将它们操纵到我想要的东西。

对于你的信息我对Javascript和Jquery非常新,但如果有人给出正确的指示和权利语法,我可以赶上。我喜欢干净的代码,从那些代码我可以学到更多并理解。

假设我有这个结构html,它在firebugs上是相同的: -

<div name="div0" class="div0">
<input name="txt0" class="txt0">
<br/><br/>
<div name="div1[]" class="divL1">
    <button class="btn1"></button>
    <button class="btn2"></button>
    <input  name="txtL1_a[]" class="cLtxt1">
    <input  name="txtL1_b[]" class="cLtxt1">
             <br/><br/>
             <div name="div2[]" class="divL2">
                  <div id="ui-widget">
                  <input  name="txtL2_a[]" class="cLtxt2 autosuggest">
                  </div>
                  <input  name="txtL2_b[]" class="cLtxt2">
             </div>
     <br/><br/>
<div name="div1[]" class="divL1">
    <button class="btn1"></button>
    <button class="btn2"></button>
    <input  name="txtL1_a[]" class="cLtxt1">
    <input  name="txtL1_b[]" class="cLtxt1">
             <br/><br/>
             <div name="div2[]" class="divL2">
                  <div id="ui-widget">
                  <input  name="txtL2_a[]" class="cLtxt2 autosuggest">
                  </div>
                  <input  name="txtL2_b[]" class="cLtxt2">
             </div>                 
</div>
<br/><br/>

实际上在我脑子里有很多问题,但我先问几个问题。

1。我想运行.autosuggest,这对我来说很复杂,因为在此之前的正常形式我可以管理运行它,但是当动态父div中的.autosuggest并且位于动态输入时我不能获取一个值并显示自动完成。

通过给定id“txtL2_a []”函数,SearchText无法执行自动完成,也不知道哪个索引正在执行此操作。

    function SearchText() {
        $(".autosuggest").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "frmsetuptrip.aspx/GetAutoCompleteData",
                    minLength: 3,
                    data: "{'presearch':'" + document.getElementById('txtL2_a[]').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        if ((data.d).length == 0) {
                            //$('#button9').show();
                            var result = [
   {
       label: 'No matches found',
       value: response.term
   }
                            ];
                            response(result);
                        }
                        else {
                            response(data.d);
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        });
    }

2。让我们说

<div name="div1[]" class="divL1"> //index 1

我需要一些自动填充 - 让我说填写时

<input  name="txtL2_a[]" class="cLtxt2 autosuggest">  //index :1

自动在

中取值
<input  name="txtL2_b[]" class="cLtxt2"> 'Index 1

只会更改基于父母的索引。

3。无论如何,我可以捕获所有事件并通过IF详细说明,然后去特定的子功能或任务,如下面的伪代码: -

    $("div.div0").each(function (event) {

    if (event=="keyup" on child=="divL1"+index[0]){
       //detect more spesific which object are doing that
        if (whoisdoing=="txtL1_a[]"+index[0] {
          //then do action etc: fill up parent input
          $("div0.txt0").val($(txtL1_a.index[0]).val());  
        }
        if (whoisdoing=="txtL1_b[]"+index[0] {
         //then do action etc: fill up childs input 
          $("div2[index[0]].txtL2_b[index[0]].val( $(txtL1_b[index[0]]).val() );
        }
    }

//event - keypress

//event - click

//and many more

    }); 

我在互联网上找不到上面提到的所有这些问题。如果有人有解决方案或已经开发了该功能请分享,我相信这不容易处理。

无论如何,感谢您提前阅读并回复我的问题。

最诚挚的问候。

3 个答案:

答案 0 :(得分:1)

我想再想一想 - 它应该有一个解决方案!

权利现在我可以处理KEYUP并点击我的动态子项哪个特定的输入标签我可以在哪里完成一些任务。我发现在动态父内部的动态子项中我首先需要使用直接类名和Catch父索引。

您不能将以下语法用于我的html结构: -

    $(document).ready(function () {
        var buttons = document.getElementsByTagName('button');
        var buttonsLength = buttons.length;
        for (var i = 0; i < buttonsLength; i++) {
            buttons[i].addEventListener('keyup', clickResponse, false);
        };
    });
    function clickResponse() {
        //  do something based on button selection here...
    }

我发现上面的语法只能在第一级父级运行,而不在运行时添加动态子级/父级。

我所做的是使用下面的语法解决我的问题2和3

        $("div.div0").on("keyup", "input", function () {
            //detect name and val which input are doing keyup
            handler = $(this).val();
            name = $(this).attr('name');
            parHandler = name;
            //only this input I want do some task
            if (name == "txtL1_a[]") {
                dcAction = "FillUpOtherInput";
                FillUp; //run functions                   
            }
        });

        function FillUp() { 
            if (dcAction == "FillUpOtherInput") {
                alert("Handler Name: " + parHandler + " Index Level :" + dc2);
                //make sure right Parent Index before insert a value
                //--should i loop
                $("div.purchase-items").each(function (i) {
                    alert(i);
                    if (i == dc2) {
                        $(this).find("input[name='txtL1_b[]']").val("Hai");
                    }
                    i+1
                });
                parHandler = "";
                dc2 = "";
                dcAction = "";
            }
        }

是的!我可以将值填充到同一父索引上的其他输入。

如果有任何人在动态父项中遇到动态子项的问题,请执行此操作,您可以参考此语法来解决您的问题。

如果有人有更好的解决方案,请分享到这里帮助像我这样的其他人作为Jquery功能的新手。

答案 1 :(得分:1)

关于自动完成的问题1,检测哪个动态孩子在做什么我使用这个行语法: -

    function SearchText(pIndex,iValue) {
        //alert(dc2 + "/" + iValue);
        $("div.divL2").eq(pIndex).find(".autosuggest").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "frmsetuptrip.aspx/GetAutoCompleteData",
                    minLength: 3,
                    data: "{'presearch':'" + $("div.divL2").eq(pIndex).find("input[name='txtL2_a[]']").val() + "'}",
                    dataType: "json",
                    success: function (data) {
                        if ((data.d).length == 0) {
                            //$('#button9').show();
                            var result = [
   {
       label: 'No matches found',
       value: response.term
   }
                            ];
                            response(result);
                        }
                        else {
                            response(data.d);
                        }
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            }
        });
    }

现在我的自动填充功能可以捕获txtL2_a []值,并知道哪个父级要显示列表。

我学到并喜欢分享给你的是

$(&#34; div.divL2&#34)当量(p食指).find。(&#34; .autosuggest&#34)

$( - 什么是父名称 - )。eq(-put parent index - )。find(输入时为 - 类名称)

那么它应该运行!。

我是新人,非常感谢所有读过这个问题的人,希望有人能从我在这里写的内容中得到一些建议。 谁有意帮助我像 @baao 我真的很感激,非常感谢。

如果有任何更好的语法/脚本可以分享,欢迎你们分享,也许它可以帮助千万搜索并面对像我一样的问题。

我很高兴和诚实地分享我已经知道的代码并解决有关我的情况的问题。

答案 2 :(得分:0)

要在填充函数上制作更短的语法,请按照以下步骤操作: -

function FillUp() { 
            if (dcAction == "FillUpOtherInput") { 
                $(div.div0).eq(dc2).find("input[name='txtL1_b[]']").val("Hai");
                parHandler = "";
                dc2 = "";
                dcAction = "";
            }
        }

我只知道 eq(***,如果你知道索引* )**是直接转到特定元素,如给定的动态父/子索引。