Your approach fails because the code looks for the element at that moment in time. When it finds it, it binds it. The code does not keep looking for elements.

To do it your way, you would need to use event delegation.

$("#catName").on("input", function() {
  if ($("#catName").val().length > 0) {
    $("#slide_save_button").attr('id', 'slide_save_button_open');
  } else {
    $("#slide_save_button_open").attr('id', 'slide_save_button');
  }
});

$(document).on("click", "#slide_save_button_open", function() {
  console.log("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName"/>
  <button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>

Now changing the id is not really the best solution. You probably should just take a "validation" approach and use a variable to hold the state or you can use a class.

const btn = $("#slide_save_button");

$("#catName").on("input", function() {
  btn.toggleClass("open", $("#catName").val().length > 0);
});

btn.on("click", function() {
  if (btn.hasClass("open")) {
    console.log("clicked");
  } else {
    console.log("need to fill in");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName" />
  <button type="button" id="slide_save_button" name="slide_save_button">Run</button>
</form>

But you could just use HTML5 validation

const form = $("#myForm");
form.on("submit", function (evt) {
  evt.preventDefault();
  console.log("clicked");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <label for="catName">Name:</label>
  <input id="catName" name="catName" required/>
  <button type="submit" id="slide_save_button" name="slide_save_button">Run</button>
</form>

$("#slide_save_button_open") searches the DOM for an element which has that ID right now. You then add an event handler to it.

When you later change the ID, it doesn't retroactively delete the existing event handlers and rerun the original code to attach new ones.

You can achieve something like that with event delegation where you bind the event handler to an ancestor element and listen for a bubbled event.

$(document).on("click", "#slide_save_button_open", function () { .... });

You could also test for something about the element inside the event handler:

$("#slide_save_button").on("input", function(e) {
    if ( $(e.currentTarget).attr('id') === 'slide_save_button_open') {

That said, I'd recommend testing a different feature of the element and not changing the ID. It's still the same thing even if it is in a different state.

Take a look at the Navigation Menu Button Example. You could make use of aria-expanded="true".

Base on this https://stackoverflow.com/a/27041899/15924734 it's not ok to change ID attribute. For what you need, you can use addClass(), removeClass() & toggleClass()

Also for dynamic elements you can use this:

$(document).on("click", "#test-element", function() {
   console.log("clicked");
});