【问题标题】:Trigger Input click event when Label Text Change标签文本更改时触发输入点击事件
【发布时间】:2018-08-09 05:58:05
【问题描述】:
  1. 我有一个ID为lblResult的标签

  2. 我有以下代码:

    @(Html.TreeView(模型) .EmptyContent("根") .Children(m => m.Childs) .HtmlAttributes(new { id = "tree" }) .ChildrenHtmlAttributes(new { @class= "subItem" }) .ItemText(m => m.AssetNumber) .项目模板( @ @*@item.AssetNumber*@ ) )
  3. 然后,我在视图上有以下代码:

@using (Html.BeginForm("AssetTypeIndex", "ControlFiles", FormMethod.Get))
{
<div class="row">
<div class="col-lg-offset-2 col-lg-8 col-lg-offset-2">
<div class="form-inline">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Search</span>
@Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control" })
<span class="input-group-btn">
<button class="btn btn-default" type="submit" value="Search">View</button>
</span>
</div>
<div class="pull-right">
<a href=@Url.Action("AssetTypeCreate", "ControlFiles") class="btn btn-default">Create New</a>
</div>
</div>
@ 987654338@
</div>
}

  1. 在脚本部分:

    $(函数(){ var selectedData; $('#jstree').jstree({ “核”: { “多个”:是的, “check_callback”:是的, “主题”:{ “响应式”:是的, '变体':'小', “条纹”:假, “点”:是的 } }, “类型”:{ “默认”: { "icon": "glyphicon glyphicon-record" }, “根”: { "icon": "glyphicon glyphicon-ok" } }, “插件”:[“dnd”,“状态”,“类型”,“排序”] }).on('changed.jstree', function (e, data) { 变量 i, j, r = []; for (i = 0, j = data.selected.length; i

如果您在上面的代码中看到。有一个提交按钮,用于触发控制器上的搜索功能。
我的问题是,是否可以在不单击按钮的情况下运行“搜索功能”?我想在lblResult 收到来自 jsTree 的文本时运行“搜索功能”,这意味着当 lblResult 文本发生变化时。

请指教。
谢谢。

【问题讨论】:

  • 我想问一下 lblResult 中的文本何时更改?
  • @BaiNguyen,当我单击 jsTree 上的节点时,它会发生变化。干杯,
  • 所以我认为当你点击这个时,你最好提交搜索表单。
  • @BaiNguyen,我没听懂你。我是 MVC 的新手。请给一个答案部分好吗?另外,当我单击节点时。我也想在标签上显示该值。这就是为什么我有上面的问题。

标签: jquery asp.net-mvc


【解决方案1】:
Option 1: When clicking a node on your jsTree trigger that submit function by simulating a mouse-click using click method. As you know for sure the label will be changing.

@using (Html.BeginForm("AssetTypeIndex", "ControlFiles", FormMethod.Get)){
    <div class="row">
        <div class="col-lg-offset-2 col-lg-8 col-lg-offset-2" style="margin-top:-5px;">
            <div class="form-inline">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">Search</span>
                    @Html.TextBox("SearchString", ViewBag.CurrentFilter as string, new { @class = "form-control" })
                    <span class="input-group-btn">
                        <button class="btn btn-default" id="submitSearch" type="submit" value="Search">View</button>
                    </span>
                </div>

                <div class="pull-right">
                    <a href=@Url.Action("AssetTypeCreate", "ControlFiles") class="btn btn-default">Create New</a>
                </div>
            </div>
        </div>
    </div>
}
$("#submitSearch").click(); // use the code when clicking a node on jsTree

Option 2: If you are manually changing the label by entering in a textbox then use the keyup event to trigger submit function.

$(function(){
  $("#lblreasult").on('keyup', function(){
    $("#submitSearch").click();
  });
});

【讨论】:

    【解决方案2】:

    对不起,我的回复晚了,当您单击 jsTree 中的一个节点时:一个标签的 id 是 node1,您可以删除此代码

    <span class="input-group-btn">
         <button class="btn btn-default" id="submitSearch" type="submit" value="Search">View</button>
     </span>
    

    或者添加这个css代码

    #submitSearch{display:hidden}
    

    我在你的代码中做了一些修改

    $('#jstree').on('changed', function (e, data) { 
        var i, j = data.selected.length, r = []; 
        for(i = 0,  i < j; i++) { 
            r.push(data.instance.get_node(data.selected[i]).text); 
        } 
        $('#event_result').html('Selected: ' + r.join(', ')); 
        $('#lblResult').text('your text here');//
        $('form').submit();
    });
    

    【讨论】:

    • 我在点击节点时使用这个 --> @item.AssetNumber ... 然后在script sect... $('#jstree') // 监听事件 .on('changed.jstree', function (e, data) { var i, j, r = []; for(i = 0, j = data.selected.length; i
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-06-15
    • 1970-01-01
    • 1970-01-01
    • 2015-08-15
    相关资源
    最近更新 更多