Question

我想使用Strust2 jQuery插件内部使用的publish / subscribe框架。

用户可以从列表中选择一个帐号，也可以在文本框中输入。

我想在文本框或选择选项更改时发布事件。因此，用户只能键入文本框或从选择框中选择一些内容：

<s:textfield name="account"  onblur="$.publish('accountChanged',this,event)"/>
<s:select name="accountList" list="destinationAccounts"
    onblur="$.publish('accountChanged',this,event)"/>

以下是js：

$.subscribe('accountChanged', function(event, data) {
    alert("New data is: " + data.value);
    if ( event.target.id=='account') {
        //Do something
    }
}

以下是问题：

data.value仅适用于文本框，对于选择框，data.value未定义。
我想知道哪个目标收到了这个事件。 event.target.id无效！我认为事件对象不是jQuery事件对象吗？

我查看了示例展示应用程序，但找不到任何。

我是否正确调用了$.publish方法？还有更好的方法吗？

Answer 1

如果您订阅主题，请为每个标记保留唯一的主题名称，以便为标记分隔处理程序。每次在onblur事件中发布主题时都会创建新事件。主题的textfield处理程序按您所述的方式工作。 select标记不起作用，因为错误的参数作为data传递。工作代码的例子

<s:textfield name="account"  onblur="$(this).publish('accountChanged', this, event)"/>
<s:select name="accountList" list="{'list1', 'list2','list3'}" onblur="$(this).publish('accountListChanged', this, event)"/>
<script type="text/javascript">
  $.subscribe('accountChanged', function(event, data) {
    alert("accountChanged: " + data.value);
  });
  $.subscribe('accountListChanged', function(event, data) {
    alert("accountListChanged: " + data.parentElement.value);
  });
</script>

正如您所见，data.value未定义，因为应使用data.parentElement.value。 event.target.id无效，因为应使用event.originalEvent.target.id。 event对象是jQuery事件，但originalEvent是DHTML对象，blur。

我不知道您的要求，如果您需要订阅/发布活动或使用原始事件处理程序，我不能说在这种情况下哪个更好。

Answer 2

以下代码解决了我的问题：

由于我找不到任何发布/订阅框架的例子，我希望以下示例可以帮助其他人！

jsp将是

您必须致电${this).publish而不是$.publish

<s:textfield name="account"  onblur="$(this).publish('destinationChanged', this, event)"/>
<s:select name="accountList" list="{'list1', 'list2','list3'}" onblur="$(this).publish('destinationChanged', this, event)" emptyOption="true"/>
<s:textfield name="destinationAccount" type="hidden" />

JS将是

$.subscribe('destinationChanged', function(event, data) {
            //If user types in the textbox 
            //then get the value and make the select box shows an empty option 
        if( !!data.value){
            destinationAccount= data.value;
        $('#destinationKnownAccount').val($("#destinationKnownAccount option:first").val());
        } else{
             //The user selected an account from select box. 
             // So get the value from select box and clean textbox          
            destinationAccount= data.parentElement.value;
            $('#destinationUnknownAccount').val('');
        }
            //Set the hidden box        
        $('#destinationAccount').val( destinationAccount);


    });

如上所述，可以使用event.originalEvent.target.id来查找选择的目标。

使用Struts 2 jQuery插件发布一个事件

2 个答案: