How to invoke a managed bean function from an autogenerated command button with ajax

Question

I have a h:selectOneMenu jsf tag that contains a list of users to pick one. When I select one option a h:dataTable is generated using ajax. This new dataTable contains two columns: the user information (picked) and a button to delete that row (user). The behavior expected is that when I click on Delete button that rows must be deleted. But when I click on Delete commandButton the method attached to it (delete) doesn't work. Debugging code delete method never start. I see the source code generated on the browser and I saw that the table is generated with no rows. I'm not sure if that's the error. Must I use another html tag? How can I execute a backing bean method from an auto generated dom elements.

the code of my facelet is next:

<h:selectOneMenu id="artifactAuthors" value="#{artifactBean.authorId}" required="true">
  <f:selectItems value="#{artifactBean.users}"/>
</h:selectOneMenu>
<h:commandButton value="Add" type="button">
  <f:ajax listener="#{artifactBean.addAuthor}" execute="artifactAuthors" render="selectedAuthors"/>
</h:commandButton>
<h:panelGroup id="selectedAuthors">
  <h:dataTable value="#{artifactBean.selectedAuthors.entrySet().toArray()}" var="author">
    <h:column><h:outputLabel value="#{author.key}"/></h:column>
    <h:column>
      <h:commandButton value="#{bundle['button.delete']}" type="button">
        <f:ajax listener="#{artifactBean.delete(1)}" render="selectedAuthors"/>
      </h:commandButton>
    </h:column>
  </h:dataTable>
</h:panelGroup>

An the backing bean is next:

@Named(value = "artifactBean")
@RequestScoped
public class ArtifactBean {
...
  Map<String, Integer> selectedAuthors;
...

  public void delete(int id) {
    System.out.println("==> "+id);
    int a = 3;
    int b = 2;
    int c = a * b;
  }
}

This is the form sreenshot

Thanks in advance.