Question

为动态创建的按钮添加click事件

我已经为动态创建的按钮添加了id（所有按钮都相同），然后根据id调用了点击功能当我单击按钮时，它应该在网页中显示按钮的值。

@Entity
@Table(name = "party")
public class Party implements Serializable {

    @Id
    @GeneratedValue(generator = "UUID")
    @GenericGenerator(
        name = "UUID",
        strategy = "org.hibernate.id.UUIDGenerator"
    )
    @Column(name = "id", updatable = false, nullable = false, columnDefinition = "uuid")
    private UUID id;

    @Column(name = "first_name")
    private String firstName;

    @Column(name = "last_name")
    private String lastName;

    @Enumerated(EnumType.STRING)
    @Column(name = "gender")
    private Gender gender;

    @Column(name = "phone")
    private String phone;

    @Column(name = "email")
    private String email;

    @Column(name = "last_change_time")
    private Date lastChangeTime;

    @Column(name = "last_change_user")
    private String lastChangeUser;

    @Column(name = "last_change_action")
    private String lastChangeAction;

    @OneToOne(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    @JoinColumn(name = "party_type_id", nullable = false)
    private PartyType partyType;

    @OneToOne(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
    @JoinColumn(name = "address_id", nullable = false)
    private Address address;

    @ManyToMany(fetch = FetchType.EAGER, cascade = CascadeType.ALL)
    private Set<Role> role;


}

public class PartySpecification {
    public static Specification<Party> containsTextInAttributes(String text, List<String> attributes) {
        if (!text.contains("%")) {
            text = "%" + text + "%";
        }
        String finalText = text;
        return new Specification<Party>() {
            @Override
            public Predicate toPredicate(Root<Party> root, CriteriaQuery<?> cq, CriteriaBuilder builder) {
                return builder.or(root.getModel().getDeclaredSingularAttributes().stream().filter(a -> attributes.contains(a.getName()))
                    .map(a -> {
                        return builder.like(root.get(a.getName()), finalText);
                    })
                    .toArray(Predicate[]::new)
                );
            }
        };
    }
}

Answer 1

您不需要ID，只需使用事件目标：

$(".btn").click(function(event){
     var msg = "The free time slot is" + event.target.value;
     $("#resultDiv1").html(msg);
});

Answer 2

将相同的ID分配给多个元素不是一个好主意。使用类代替，jQuery会更快乐。我不确定您要实现的目标，无论如何，您可以主要通过以下两种方式管理动态按钮上的点击事件：

直接在元素上使用onclick：

var timeBut= $('<div class="col-md-2 top-space-20"><input type="button" id="timebutt' + i + '" class="btn" value="the value fetching from the back end" onclick="timebutt_click(' + i + ')"></div>');
...
function timebutt_click(value){
    msg1 = "The free time slot is" + value;
...
}

稍后使用类

var timeBut= $('<div class="col-md-2 top-space-20"><input type="button" class="btn timebutt" value="the value fetching from the back end" data-value="' + i + '"></div>');
...
$(".timebutt").click(function(){
   msg1 = "The free time slot is" + $(this).data("value");
});

在这种情况下，我将绑定到button的值存储在data属性中，以便以后可以检索。在第一种情况下，不需要此操作，因为该值直接作为onclick函数的参数传递。

可能不需要按钮的

id。以防万一，确保它是唯一的，然后在基本名称中添加一些唯一的名称（请参见第一个示例）。

为动态创建的按钮添加点击事件

2 个答案: